/* ==========================================
   WATER GROUND — shared by the hub and the index.
   Flips hub.css from ink-on-dark to ink-on-water and puts the rendered pool
   behind the page. Page-specific pieces stay in home.css.
   ========================================== */
:root {
  --ink-900: #9a9ea1;   /* fallback ground before the canvas paints */
  --rule: #6f7476;
  --rule-soft: #83888a;
  --muted: #33383b;
  --body: #23272b;
  --bright: #0f1215;
  --accent: #6d5205;    /* ochre darkened for contrast on a light field */
}

#water {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* the sim listens on window, so clicks pass through */
}

body { background: #9a9ea1; }

.page { position: relative; z-index: 1; }

/* Type sits directly on the water, so it carries its own separation rather
   than a scrim: heavier weight and a hairline halo tuned to the light field. */
h1 {
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.lede { color: var(--body); }

.eyebrow { color: var(--accent); }

.back { color: var(--muted); }
.back:hover { color: var(--accent); }

footer { border-top-color: rgba(20, 24, 27, 0.22); }
footer a, footer span { color: var(--muted); }
footer a:hover { color: var(--accent); }

a { color: var(--accent); }
a:hover { color: var(--bright); }

/* ---------- the index's rows, on water ---------- */
.group-head { border-bottom-color: rgba(20, 24, 27, 0.3); }
.row { border-top-color: rgba(20, 24, 27, 0.18); }
.row-name a {
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  /* the pool holds still; the radiance remains */
  #water { opacity: 1; }
}