.page { padding: calc(var(--topbar) + clamp(56px, 9vw, 128px)) 0 clamp(80px, 10vw, 140px); }
.page-head { display: grid; gap: 20px; max-width: 760px; }
.page-title { font-stretch: 104%; }
.page-lede { max-width: 38ch; }
.page-date { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--text-3); }

.inline-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 36%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.inline-link:hover { color: var(--accent-strong); text-decoration-color: currentColor; }

@media (max-width: 399.98px) {
  .nav a[href$="#mission"] { display: none; }
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(24px, 4vw, 64px);
  margin-top: clamp(56px, 7vw, 96px);
  max-width: 1040px;
}
.fact { border-top: 1px solid var(--line-strong); padding-top: 22px; }
.fact-title { font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.fact p { margin-top: 10px; color: var(--text-2); font-size: 16px; max-width: 44ch; }

@media (max-width: 799.98px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
}

.page-lost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(560px, 100svh);
  display: grid;
  align-items: center;
}
.lost { position: relative; z-index: 1; display: grid; gap: 22px; max-width: 600px; }
.lost-actions { margin-top: 10px; }

.glade {
  position: absolute; z-index: 0;
  top: 50%; right: max(-60px, calc(50vw - 760px));
  width: min(52vw, 640px); aspect-ratio: 1;
  transform: translateY(-46%);
  pointer-events: none;
  background:
    radial-gradient(circle at 55.3% 50%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 26px),
    radial-gradient(circle at 55.3% 50.0%, color-mix(in srgb, var(--accent) 92%, transparent) 2.2px, transparent 3.2px),
    radial-gradient(circle at 43.6% 55.9%, color-mix(in srgb, var(--kind-new) 91%, transparent) 2.3px, transparent 3.3px),
    radial-gradient(circle at 51.0% 38.9%, color-mix(in srgb, var(--kind-tidy) 89%, transparent) 2.4px, transparent 3.4px),
    radial-gradient(circle at 58.0% 60.4%, color-mix(in srgb, var(--kind-fix) 88%, transparent) 2.4px, transparent 3.4px),
    radial-gradient(circle at 35.4% 47.4%, color-mix(in srgb, var(--kind-note) 86%, transparent) 2.5px, transparent 3.5px),
    radial-gradient(circle at 63.8% 41.2%, color-mix(in srgb, var(--kind-new) 85%, transparent) 2.6px, transparent 3.6px),
    radial-gradient(circle at 45.4% 67.1%, color-mix(in srgb, var(--kind-tidy) 83%, transparent) 2.7px, transparent 3.7px),
    radial-gradient(circle at 41.2% 33.1%, color-mix(in srgb, var(--kind-fix) 82%, transparent) 2.7px, transparent 3.7px),
    radial-gradient(circle at 69.0% 56.9%, color-mix(in srgb, var(--kind-note) 80%, transparent) 2.8px, transparent 3.8px),
    radial-gradient(circle at 30.2% 58.2%, color-mix(in srgb, var(--kind-new) 79%, transparent) 2.9px, transparent 3.9px),
    radial-gradient(circle at 59.5% 29.7%, color-mix(in srgb, var(--kind-tidy) 77%, transparent) 3.0px, transparent 4.0px),
    radial-gradient(circle at 57.0% 72.4%, color-mix(in srgb, var(--kind-fix) 76%, transparent) 3.0px, transparent 4.0px),
    radial-gradient(circle at 28.8% 37.7%, color-mix(in srgb, var(--kind-note) 74%, transparent) 3.1px, transparent 4.1px),
    radial-gradient(circle at 74.9% 44.5%, color-mix(in srgb, var(--kind-new) 73%, transparent) 3.2px, transparent 4.2px),
    radial-gradient(circle at 34.8% 71.6%, color-mix(in srgb, var(--kind-tidy) 71%, transparent) 3.3px, transparent 4.3px),
    radial-gradient(circle at 46.5% 23.0%, color-mix(in srgb, var(--kind-fix) 70%, transparent) 3.3px, transparent 4.3px),
    radial-gradient(circle at 71.5% 68.1%, color-mix(in srgb, var(--kind-note) 68%, transparent) 3.4px, transparent 4.4px),
    radial-gradient(circle at 21.1% 51.2%, color-mix(in srgb, var(--kind-new) 67%, transparent) 3.5px, transparent 4.5px),
    radial-gradient(circle at 71.1% 29.0%, color-mix(in srgb, var(--kind-tidy) 66%, transparent) 3.6px, transparent 4.6px),
    radial-gradient(circle at 29.9% 26.0%, color-mix(in srgb, var(--kind-note) 63%, transparent) 3.7px, transparent 4.7px),
    radial-gradient(circle at 81.8% 54.3%, color-mix(in srgb, var(--kind-new) 61%, transparent) 3.8px, transparent 4.8px),
    radial-gradient(circle at 23.1% 68.7%, color-mix(in srgb, var(--kind-tidy) 60%, transparent) 3.9px, transparent 4.9px),
    radial-gradient(circle at 57.4% 17.3%, color-mix(in srgb, var(--kind-fix) 58%, transparent) 4.0px, transparent 5.0px),
    radial-gradient(circle at 67.0% 79.7%, color-mix(in srgb, var(--kind-note) 57%, transparent) 4.0px, transparent 5.0px),
    radial-gradient(circle at 16.7% 39.4%, color-mix(in srgb, var(--kind-new) 55%, transparent) 4.1px, transparent 5.1px),
    radial-gradient(circle at 82.3% 35.1%, color-mix(in srgb, var(--kind-tidy) 54%, transparent) 4.2px, transparent 5.2px),
    radial-gradient(circle at 36.0% 83.4%, color-mix(in srgb, var(--kind-fix) 52%, transparent) 4.3px, transparent 5.3px),
    radial-gradient(circle at 37.5% 15.3%, color-mix(in srgb, var(--kind-note) 51%, transparent) 4.3px, transparent 5.3px),
    radial-gradient(circle at 83.2% 67.5%, color-mix(in srgb, var(--kind-new) 49%, transparent) 4.4px, transparent 5.4px),
    radial-gradient(circle at 13.1% 59.7%, color-mix(in srgb, var(--kind-tidy) 48%, transparent) 4.5px, transparent 5.5px),
    radial-gradient(circle at 71.0% 17.4%, color-mix(in srgb, var(--kind-fix) 46%, transparent) 4.6px, transparent 5.6px),
    radial-gradient(circle at 56.7% 88.8%, color-mix(in srgb, var(--kind-note) 45%, transparent) 4.6px, transparent 5.6px),
    radial-gradient(circle at 18.4% 25.5%, color-mix(in srgb, var(--kind-new) 43%, transparent) 4.7px, transparent 5.7px);
}

.glade-gap {
  position: absolute;
  left: 48.6%; top: 80.5%;
  width: 15px; height: 15px;
  transform: translate(-50%, -50%);
  border: 1.5px dashed var(--text-3);
  border-radius: 50%;
}

@media (max-width: 899.98px) {
  .page-lost { align-items: start; }
  .glade { top: auto; bottom: 0; right: -18%; width: min(96vw, 520px); transform: none; opacity: 0.6; }
}
