/* Landing page (pages/index.html) only.
*
* Deliberately a separate file from style.css, same reasoning as walk.css:
* style.css is shared with the form, the results list and every secondary
* page, so nothing here can break the page that actually takes submissions.
* The ?v=N on both must stay in step - see the note in game.html's .
*
* Everything below inherits the palette from style.css's :root. No new colors
* are defined here on purpose; a landing page that drifts off the site's
* palette reads as a different site. */
.landing h1 {
margin-bottom: 0.25rem;
}
/* The intro paragraphs run longer than the form's do. A touch more space
between them keeps the block from reading as a wall. */
.landing .lead {
margin-bottom: 1rem;
}
/* The patent paragraph moved below the doors on 2026-09-08 (David's call). It
is the only .lead after the nav, and without this it sits one card-gap under
/game and reads as that card's overflow rather than as its own line. */
.landing .choices + .lead {
margin-top: 2rem;
}
.choices-head {
font-size: 1.05rem;
font-weight: 600;
margin: 2rem 0 1rem;
}
.choices {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* The whole card is the link. Block display plus generous padding is what
makes it a thumb target rather than a line of text with a hotspot. */
.choice {
display: block;
padding: 1rem 1.1rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--panel);
color: var(--text);
text-decoration: none;
}
.choice:hover,
.choice:focus-visible {
border-color: var(--accent);
}
/* Keyboard focus has to be visible on a card this large, and the border change
above is too subtle on its own. */
.choice:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.choice-when {
color: var(--muted);
font-size: 0.9rem;
font-style: italic;
margin: 0 0 0.35rem;
}
/* The name and the URL are two lines saying the same thing, and that is the
point: David wrote the address into the copy, so "/walk" is the label and
the full address underneath is what somebody types on another device or
photographs off a screen. */
.choice-name {
color: var(--accent);
font-size: 1.5rem;
font-weight: 700;
margin: 0;
line-height: 1.2;
}
.choice-url {
color: var(--muted);
font-size: 0.85rem;
margin: 0.1rem 0 0.6rem;
/* Long enough to overflow a narrow phone if it ever grows. */
overflow-wrap: break-word;
}
.choice-desc {
color: var(--text);
font-size: 0.95rem;
margin: 0;
}
/* Phones. The cards are already full width; this just buys back some of the
horizontal padding and shrinks the largest type, which is the only thing on
the page big enough to wrap awkwardly at 320px. */
@media (max-width: 420px) {
.choice {
padding: 0.85rem 0.9rem;
}
.choice-name {
font-size: 1.3rem;
}
}