/* The website in front of the player. Uses the shared design system (shared/ui.css).
   The hero: one stone, and the ripples it sends, once on arrival and then on each tap. */
.hero { position: relative; min-height: 100svh; display: grid; place-content: center; justify-items: center;
    text-align: center; padding: 72px 24px 64px; overflow: hidden; isolation: isolate; }
.pond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ripple { position: absolute; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%;
    border: 1px solid var(--ink); opacity: 0; animation: ripple 5.5s var(--ease) forwards; }
@keyframes ripple { 0% { transform: scale(.4); opacity: .45; } 100% { transform: scale(7); opacity: 0; } }
.hero-stone { width: min(240px, 58vw); padding: 0; border: 0; background: none; cursor: pointer; margin-bottom: 44px;
    transition: transform .6s var(--ease); }
.hero-stone:active { transform: scale(.97); }
.hero h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; font-size: clamp(2rem, 6vw, 3.4rem);
    line-height: 1.12; max-width: 15em; margin: 0 0 22px; text-wrap: balance; }
.hero .lead { font-family: var(--serif); font-size: 1.125rem; line-height: 1.65; color: var(--soft); max-width: 28em; margin: 0; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
    .ripple { display: none; }
    .hero-stone { transition: none; }
}

/* The sections below the hero */body { height: auto; }
.site { max-width: 620px; margin: 0 auto; padding: 0 24px calc(48px + env(safe-area-inset-bottom)); }
.site section { padding: 56px 0 8px; border-top: 1px solid var(--line); }
.site h2 { font-size: 1.7rem; margin: 0 0 28px; }
.site h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); font-weight: 600; margin: 0 0 8px; }
.site p, .site dd { color: var(--soft); line-height: 1.6; }


.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.steps .stone { width: 72px; margin: 0 0 16px; }
.steps p { margin: 0; font-size: .95rem; }
@media (max-width: 560px) {
    .steps { grid-template-columns: 1fr; }
    .steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; }
    .steps .stone { width: 56px; grid-row: span 2; }
}

.facts { margin: 0; }
.facts dt { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); margin: 0 0 4px; }
.facts dd { margin: 0 0 24px; }

.found p { margin: 0 0 16px; }

.site footer { text-align: center; padding: 48px 0 0; border-top: 1px solid var(--line); margin-top: 40px; }
.site footer p { font-size: .85rem; margin: 16px 0 0; }