/* ==========================================
   HOME — the hub's three ways in, on the water ground.
   The shared ink-on-water flip lives in water.css; this is only what the hub
   itself adds.
   ========================================== */
.way h2 { font-weight: 600; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); }
.way p { color: var(--body); }
.way-num { color: var(--accent); }
.way-meta { color: var(--muted); }

.enter {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 255, 255, 0.42);
}
.enter:hover { background: var(--accent); color: #f2efe6; }

.way { border-top-color: rgba(20, 24, 27, 0.22); }
.soon-tag { border-color: rgba(20, 24, 27, 0.28); color: var(--muted); }
.way.soon { opacity: 0.62; }

/* ---------- the profile picture ---------- */
/* A circle cropped to the head, sitting directly on the water. The ring is a
   1px border rather than a shadow — depth comes from the line, not elevation. */
.avatar {
  display: block;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(20, 24, 27, 0.32);
  margin: 0 0 24px;
  background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 820px) {
  .avatar { width: 104px; height: 104px; margin-bottom: 18px; }
}