/* ============================================================
   Trash Tribes — public site
   ============================================================ */

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, var(--paper) 88%, white);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1.5px solid var(--line);
}
.head-row {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--head-h); gap: 18px;
}
.site-nav { display: flex; gap: 24px; align-items: center; font-family: var(--sans); font-size: .92rem; }
/* The links are mounted inside one container by UI.mountNav, so that
   container needs its own gap — the nav's gap only separates ITS
   children, and the whole link list is a single child. */
.site-nav [data-nav-links] { display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* :not(.btn) matters — a bare `.site-nav a` rule (0,1,1) out-specifies
   `.btn-solid` (0,1,0) and repaints the solid green button's text to
   ink, which is what made "Open the map" read differently from every
   other dark-green button on the site. */
.site-nav a:not(.btn) { color: var(--ink-soft); text-decoration: none; }
.site-nav a:not(.btn):hover { color: var(--green); }
.site-nav .btn-solid { color: var(--paper-warm); }
.nav-toggle { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 78px 0 0; }
/* Contour rings — the OS-map texture the brand has always leaned on. */
.hero-contours {
  position: absolute; inset: -10% -5%; pointer-events: none; opacity: .55;
  background:
    repeating-radial-gradient(ellipse 880px 400px at 12% 108%,
      transparent 0 44px, color-mix(in srgb, var(--gold) 20%, transparent) 44px 45.4px),
    repeating-radial-gradient(ellipse 1120px 520px at 96% -12%,
      transparent 0 52px, color-mix(in srgb, var(--moss) 18%, transparent) 52px 53.4px);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 96%);
}
.hero-inner { position: relative; }
.hero h1 em { font-style: italic; color: var(--green); }
.lede { font-size: 1.14rem; max-width: 648px; margin: 24px 0 28px; color: var(--ink-soft); }
.hero-cta { display: flex; gap: 13px; flex-wrap: wrap; }
.hero-note { font-family: var(--sans); font-size: .82rem; color: var(--ink-faint); margin-top: 14px; }

/* ---------- the hero animation ----------
   The record building itself over a fictional village. Two things stop
   it reading as a video dropped into a box:

   1. It is FULL-BLEED. The canvas breaks out of the .wrap and runs the
      whole viewport width, so there is no frame edge to notice.
   2. It is FOGGED on every side. The canvas paints its own paper tone,
      which is close to the page's but not identical, so the edges are
      faded out to the page colour rather than butted up against it.
      The fade is generous at the sides (where a hard edge would read as
      a border) and softer top and bottom, where it has the heading above
      and the next band below to melt into.

   The fog is a paper-coloured overlay rather than a CSS mask: the mask
   would fade the canvas to TRANSPARENT and let the contour texture
   behind show through the animation, which looks like a printing fault.
   Painting over it with the page's own background keeps the blend exact
   and costs nothing in support. */
.hero-anim {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);      /* break out of the centred column */
  margin-top: 30px;
  aspect-ratio: 1600 / 400;
  max-height: 46vh;
  min-height: 190px;
  overflow: hidden;
}
.hero-anim canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* Sides first and hardest, then top and bottom over the top of them. */
.hero-anim-fog {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right,
      var(--paper) 0%,
      color-mix(in srgb, var(--paper) 42%, transparent) 4%,
      transparent 12%,
      transparent 88%,
      color-mix(in srgb, var(--paper) 42%, transparent) 96%,
      var(--paper) 100%),
    linear-gradient(to bottom,
      var(--paper) 0%,
      color-mix(in srgb, var(--paper) 40%, transparent) 12%,
      transparent 34%,
      transparent 62%,
      color-mix(in srgb, var(--paper) 45%, transparent) 88%,
      var(--paper) 100%);
}

/* Info panel — a facsimile of the live map's road panel (app.html), slid in
   near the end of the sequence when a road is selected. Decorative; sample data. */
.hero-panel {
  position: absolute; z-index: 3; top: 14px; right: 16px; width: 296px;
  max-height: calc(100% - 24px);
  /* deliberately hazy — it should sit in the scene, not pop off it */
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px);
  border: 1.5px solid color-mix(in srgb, var(--line) 66%, transparent);
  border-radius: var(--r-md); box-shadow: 0 3px 16px rgba(36, 35, 29, .09);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateX(26px) scale(.98); pointer-events: none;
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.hero-panel.show { opacity: .88; transform: none; }
.hp-head {
  padding: 12px 15px 10px; border-bottom: 1.5px solid var(--line-soft);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.hp-head h3 { font-size: 1.02rem; line-height: 1.2; }
.hp-meta { font-family: var(--sans); font-size: .72rem; color: var(--ink-faint); margin-top: 3px; }
.hp-x { font-size: 1.2rem; line-height: 1; color: var(--ink-faint); flex: none; }
/* fade the foot: on a short hero the panel caps and this reads as a scroll */
.hp-body {
  padding: 11px 15px 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
.hp-switch {
  display: flex; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; margin-bottom: 11px; font-family: var(--sans); font-size: .74rem;
}
.hp-switch span { flex: 1; text-align: center; padding: 6px 4px; color: var(--ink-soft); border-right: 1.5px solid var(--line); }
.hp-switch span:last-child { border-right: none; flex: 0 0 52px; }
.hp-switch span.on { background: var(--green); color: var(--paper-warm); }
.hp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.hp-stats { display: flex; gap: 16px; margin: 10px 0 4px; font-family: var(--sans); }
.hp-stats b { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.hp-stats span { font-size: .66rem; color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; }
.hp-note { font-family: var(--sans); font-size: .73rem; color: var(--ink-soft); margin: 6px 0 0; line-height: 1.45; }
.hp-risk {
  font-family: var(--sans); font-size: .74rem; line-height: 1.4; margin-top: 9px; padding: 7px 9px;
  border-left: 3px solid var(--seg-risk); background: color-mix(in srgb, var(--seg-risk) 8%, transparent);
}
.hp-h4 { font-family: var(--sans); font-size: .8rem; margin: 11px 0 0; }
.hp-hist { border-top: 1.5px solid var(--line-soft); margin-top: 5px; }
.hp-row { padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-family: var(--sans); }
.hp-row:last-child { border-bottom: none; }
.hp-rtop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hp-date { font-size: .8rem; font-weight: 600; }
.hp-ago { font-size: .7rem; color: var(--ink-faint); }
.hp-by { font-size: .74rem; color: var(--ink-soft); margin-top: 2px; }
.hp-det { font-size: .72rem; color: var(--ink-faint); margin-top: 3px; }
.hp-cta {
  margin-top: 10px; text-align: center; font-family: var(--sans); font-size: .76rem;
  color: var(--ink-soft); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 7px;
}
.hp-cta span { color: var(--ink-faint); }
@media (max-width: 860px) { .hero-panel { display: none; } }

@media (max-width: 720px) {
  /* Tall and narrow: crop rather than shrink, so the village stays
     legible instead of becoming a stripe. */
  .hero-anim { aspect-ratio: 4 / 3; max-height: 40vh; }
}

/* The signature: a pick line drawing itself along a road. */
.hero-route { width: 100%; max-width: 940px; height: 104px; margin-top: 46px; display: block; }
.route-road {
  fill: none; stroke: var(--line); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round;
}
.route-path {
  fill: none; stroke: var(--seg-recent); stroke-width: 5.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
  animation: routeDraw 2.4s .35s cubic-bezier(.35,.05,.2,1) forwards;
}
@keyframes routeDraw { to { stroke-dashoffset: 0; } }
.route-pin { fill: var(--green); stroke: var(--paper-warm); stroke-width: 3; }
.route-pin-b { opacity: 0; animation: pinIn .45s 2.5s forwards; }
@keyframes pinIn { to { opacity: 1; } }

/* ---------- bands ---------- */
.band { padding: 76px 0; }
.band-ink { background: var(--ink); color: var(--paper); }
.band-ink h2, .band-ink h3 { color: var(--paper); }
.band-ink p { color: color-mix(in srgb, var(--paper) 82%, var(--ink)); }
.band-paper { background: var(--paper-deep); }
.band + .band { border-top: 1.5px solid var(--line); }
.band-ink + .band, .band + .band-ink { border-top: none; }
.band-lede { font-size: 1.06rem; max-width: 660px; color: var(--ink-soft); }
.band-ink .band-lede { color: color-mix(in srgb, var(--paper) 82%, var(--ink)); }

.pull {
  font-size: clamp(1.3rem, 2.6vw, 1.72rem); line-height: 1.42;
  font-style: italic; color: var(--paper);
  border-left: 3px solid var(--gold); padding-left: 22px; margin: 26px 0;
}

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 38px; }
.step { position: relative; padding-top: 22px; border-top: 2px solid var(--green); }
.step-n {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 8px;
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: .95rem; color: var(--ink-soft); }
.step-key { height: 6px; width: 74px; border-radius: 3px; margin-bottom: 14px; }
.key-a { background: var(--line); }
.key-b { background: repeating-linear-gradient(90deg, var(--gold-soft) 0 9px, transparent 9px 17px); }
.key-c { background: linear-gradient(90deg, var(--seg-recent), var(--seg-historical)); }

.honesty {
  margin-top: 42px; padding: 18px 22px; max-width: 740px;
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .96rem;
}

/* ---------- feature grid ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 18px; margin-top: 34px; }
.feat { padding: 20px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.feat h3 { font-size: 1.02rem; margin-bottom: 7px; }
.feat p { font-size: .9rem; color: var(--ink-soft); }
.feat-icon {
  width: 34px; height: 34px; border-radius: var(--r-sm); margin-bottom: 13px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green);
  font-size: 1.05rem;
}

/* ---------- the record so far ---------- */
.rec-charts { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; margin-top: 38px; align-items: start; }
.rec-card h3 { font-size: 1.02rem; margin-bottom: 3px; }
.rec-card .lede { font-family: var(--sans); font-size: .8rem; opacity: .72; margin-bottom: 14px; }
.rec-card + .rec-card { margin-top: 28px; }
@media (max-width: 860px) { .rec-charts { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- demo map ---------- */
.map-frame {
  position: relative; margin-top: 28px;
  border: 2px solid var(--green); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-md);
}
#demo-map { height: 500px; width: 100%; background: var(--paper-deep); }
.map-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  background: color-mix(in srgb, var(--card) 95%, transparent);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 13px; display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--sans); font-size: .78rem; box-shadow: var(--shadow-sm);
}
.lg { display: inline-flex; align-items: center; gap: 7px; }
.map-hint {
  position: absolute; right: 12px; top: 12px; z-index: 5;
  background: color-mix(in srgb, var(--card) 95%, transparent);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 7px 12px; font-family: var(--sans); font-size: .78rem;
  color: var(--ink-soft); box-shadow: var(--shadow-sm); max-width: 250px;
}
.demo-panel {
  position: absolute; right: 12px; top: 12px; z-index: 6; width: 262px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 15px 17px; box-shadow: var(--shadow-md); font-family: var(--sans);
}
.demo-panel h4 { font-family: var(--serif); font-size: 1.05rem; margin-bottom: 3px; }
.demo-panel .meta { font-size: .75rem; color: var(--ink-faint); margin-bottom: 10px; }
.demo-panel .row { display: flex; justify-content: space-between; font-size: .82rem; padding: 3px 0; }
.demo-panel .row span:last-child { color: var(--ink-soft); }
/* fixed sample area: zoom presets instead of free navigation */
.demo-zooms {
  position: absolute; left: 12px; top: 12px; z-index: 6;
  display: inline-flex; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.demo-zooms button {
  font-family: var(--sans); font-size: .78rem; padding: 7px 13px; cursor: pointer;
  background: color-mix(in srgb, var(--card) 95%, transparent); color: var(--ink-soft);
  border: none; border-right: 1.5px solid var(--line);
}
.demo-zooms button:last-child { border-right: none; }
.demo-zooms button.on { background: var(--green); color: var(--paper-warm); }

.center-cta { text-align: center; margin-top: 30px; }

/* ---------- roadmap ---------- */
.phases { list-style: none; margin-top: 30px; }
.phases li {
  display: flex; gap: 22px; align-items: flex-start; padding: 24px 0;
  border-bottom: 1.5px solid color-mix(in srgb, var(--green) 22%, transparent);
}
.phases li:last-child { border-bottom: none; }
.phase-tag {
  font-family: var(--sans); font-size: .69rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-faint); border: 1.5px solid currentColor;
  border-radius: 999px; padding: 3px 12px; margin-top: 4px; white-space: nowrap; flex: none;
}
.phase-now { color: var(--paper-warm); background: var(--green); border-color: var(--green); }
.phases h3 { margin-bottom: 6px; }
.phases p { font-size: .95rem; color: var(--ink-soft); }

/* ---------- contact ---------- */
.contact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 58px; }
.mail { color: var(--gold-soft); font-size: 1.06rem; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- footer ---------- */
.site-foot {
  border-top: 1.5px solid var(--line); padding: 26px 0;
  font-family: var(--sans); font-size: .84rem; color: var(--ink-soft);
}
.foot-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; align-items: center; }
.site-foot a { color: var(--green); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .contact-cols { grid-template-columns: 1fr; gap: 38px; }
  #demo-map { height: 400px; }
  .demo-panel { position: static; width: auto; margin: 10px; box-shadow: none; }
}
@media (max-width: 720px) {
  .site-nav {
    position: absolute; top: var(--head-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--card); border-bottom: 1.5px solid var(--line);
    box-shadow: var(--shadow-md); padding: 8px 0; display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 11px 26px; }
  /* stacked on small screens, so the links become rows rather than a row */
  .site-nav [data-nav-links] { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .site-nav .nav-account { margin: 8px 26px 0; padding: 12px 0 0; border-left: none;
    border-top: 1.5px solid var(--line); width: calc(100% - 52px); }
  .site-nav .btn { margin: 8px 26px; }
  .nav-toggle {
    display: inline-flex; background: none; border: 1.5px solid var(--line);
    border-radius: var(--r-sm); padding: 7px 11px; cursor: pointer;
    font-family: var(--sans); font-size: .85rem; color: var(--ink);
  }
  .band { padding: 56px 0; }
  .hero { padding: 46px 0 20px; }
}