/* ============================================================
   mosaic.css — the Living Mosaic
   One tile = one square metre of real ground.
   ============================================================ */

.mosaic {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--strait);
}

.mosaic canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}

.mosaic:focus-visible {
  outline: 2px solid var(--candytuft);
  outline-offset: -2px;
}

/* no-JS / reduced-data fallback */
.mosaic-fallback,
.mosaic-fallback picture { position: absolute; inset: 0; }
.mosaic-fallback img { width: 100%; height: 100%; object-fit: cover; }

/* accessible table of planted patches (visually hidden by default,
   rendered visible on the support page) */
.mosaic-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--small);
}
.mosaic-table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--lichen);
  padding-bottom: 12px;
}
.mosaic-table th, .mosaic-table td {
  text-align: left;
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--rule-dark);
}
.mosaic-table th {
  font-weight: 500;
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--lichen);
}

/* ============================================================
   HERO variant
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--strait);
  isolation: isolate;
}

/* Desktop/tablet: keep copy clear of the fixed header.
   On short laptop viewports the block is tall enough that flex-end
   alone lets the eyebrow sit under the nav — padding-top reserves that band. */
@media (min-width: 640px) {
  .hero { padding-top: 64px; }
}
@media (min-width: 900px) {
  .hero { padding-top: 76px; }
}

/* Short laptop heights: tighten the hero stack so flex-end still
   leaves air under the nav. Tall monitors keep the full display size. */
@media (min-width: 640px) and (max-height: 900px) {
  .hero__content { padding-bottom: calc(var(--tile) * 2.75); }
  .hero__eyebrow { margin-bottom: calc(var(--tile) * 0.9); }
  .hero h1 { margin-bottom: calc(var(--tile) * 0.9); }
  .hero__lede { margin-bottom: calc(var(--tile) * 1.25); }
}
@media (min-width: 900px) and (max-height: 900px) {
  /* Between full display-xl and the tighter laptop size — readable, still clears the nav */
  .hero h1 { font-size: clamp(3rem, 1.4rem + 5.25vw, 6.5rem); }
  .hero__lede { font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.2rem); }
}

.hero .mosaic {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* legibility scrim behind the H1 — bottom-left, soft */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(15,50,57,.88) 0%, rgba(15,50,57,.45) 34%, transparent 62%),
    linear-gradient(105deg, rgba(15,50,57,.72) 0%, rgba(15,50,57,.25) 42%, transparent 68%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad-x) calc(var(--tile) * 4);
  pointer-events: none;
}
.hero__content a, .hero__content button { pointer-events: auto; }

.hero__eyebrow { margin-bottom: calc(var(--tile) * 1.25); }

.hero h1 {
  color: var(--chalk);
  max-width: 12ch;
  margin-bottom: calc(var(--tile) * 1.25);
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; }

.hero__lede {
  color: var(--text-on-dark-mute);
  max-width: 46ch;
  font-size: var(--body);
  line-height: 1.55;
  margin-bottom: calc(var(--tile) * 1.75);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__meta {
  position: absolute;
  right: var(--pad-x);
  bottom: calc(var(--tile) * 1.25);
  z-index: 2;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lichen);
  text-align: right;
  pointer-events: none;
  display: none;
}
@media (min-width: 900px) { .hero__meta { display: block; } }

/* mobile: H1 above, mosaic occupies lower band */
@media (max-width: 639px) {
  .hero {
    justify-content: flex-start;
    min-height: 100svh;
  }
  .hero .mosaic {
    top: auto;
    bottom: 0;
    height: 52svh;
  }
  .hero::after {
    background: linear-gradient(to bottom, transparent 40%, rgba(15,50,57,.15) 48%, transparent 56%);
  }
  .hero__content {
    padding-top: calc(64px + var(--tile) * 2.5);
    padding-bottom: 0;
  }
  .hero h1 { max-width: none; font-size: clamp(2.375rem, 11.6vw, 3rem); }
  .hero__lede { max-width: 100%; margin-bottom: calc(var(--tile) * 1.5); }
  .hero__actions { padding-bottom: calc(var(--tile) * 2); }
}

/* ============================================================
   COMPACT variant (support / donate anchor)
   ============================================================ */
.mosaic--compact {
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-card);
}
@media (max-width: 639px) {
  .mosaic--compact { aspect-ratio: 4 / 3; }
}

/* keyboard cursor announced state */
.mosaic__live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}