/* The landing page. Tokens, the town and the controls come from the viewer's
   own stylesheet (demo/static/style.css) — one design system, not a copy.
   This file is only the page's layout and its form. Clay rules hold: slabs
   have no borders, inputs are sunken, a press is a squish, nothing is a pill. */

.landing { --gutter: clamp(1rem, 4vw, 3rem); }
.landing > * { padding-inline: var(--gutter); }
.landing section + section { margin-top: 0; }

.top {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-4);
}
.top .brand { font-size: var(--text-title); }
.top .brand::before { width: .8rem; height: .8rem; }

.pitch { max-width: 60rem; padding-block: var(--space-6) var(--space-5); }
.pitch h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); line-height: 1.03; margin-bottom: var(--space-4); }
.pitch p { font-size: var(--text-lead); color: var(--ink-secondary); max-width: 46rem; margin: 0; }

/* The world is the hero: full width, no frame, already walking. */
.world { max-width: var(--measure-wide); margin-inline: auto; }
/* No site header here, so the shelf sticks to the top of the window. */
.world .controls { margin-bottom: var(--space-4); top: var(--space-2); }
.world .townside { top: var(--space-4); }
.world .feed { max-height: 18rem; }
/* A guest's memo is its own raw notes, verbatim. The full record shows them;
   here they would read as debug output between the conversations. */
.world .feed .memo { display: none; }
.hint { margin: var(--space-3) 0 0; font-size: var(--text-footnote); color: var(--ink-muted); }

.prose, .join { max-width: 46rem; margin-inline: auto; padding-block: var(--space-7) 0; }
.prose h2, .join h2 { font-size: 1.6rem; letter-spacing: -.02em; margin-bottom: var(--space-4); }
.prose p, .join > p { color: var(--ink-secondary); font-size: var(--text-lead); line-height: 1.6; margin: 0 0 var(--space-4); }
.prose b { color: var(--ink); }

/* The path: numbers molded as small Vis Vis balls, the text on the ground. */
.path { list-style: none; counter-reset: step; margin: var(--space-5) 0; padding: 0; display: grid; gap: var(--space-4); }
.path li {
  counter-increment: step; position: relative; padding-left: 3.25rem;
  color: var(--ink-secondary); font-size: var(--text-lead); line-height: 1.55;
}
.path li::before {
  content: counter(step); position: absolute; left: 0; top: -.1rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-bright); color: var(--accent); font-weight: var(--weight-heavy);
  box-shadow: var(--clay-raise-sm);
}
.path i { color: var(--positive); font-style: normal; font-weight: var(--weight-medium); }

/* The form: one raised slab, sunken wells in it. */
.join form {
  display: grid; gap: var(--space-4);
  padding: var(--space-6); margin-top: var(--space-5);
  background: var(--surface-raised); border-radius: 28px; box-shadow: var(--clay-raise);
}
.join label { display: block; font-weight: var(--weight-medium); }
.join .opt { font-weight: var(--weight-normal); color: var(--ink-muted); }
.join input:not([type=radio]):not([type=checkbox]), .join select, .join textarea {
  display: block; margin-top: var(--space-2);
  font: inherit; color: var(--ink); width: 100%; box-sizing: border-box;
  border: 0; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken); box-shadow: var(--clay-sink);
}
.join textarea { resize: vertical; }
.join fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.join legend { font-weight: var(--weight-medium); padding: 0; margin-bottom: var(--space-2); }
.join .choice label { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-normal); color: var(--ink-secondary); cursor: pointer; }
.join .choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); flex: none; }
/* The second half only exists for someone who asked for it. */
.contrib { display: none; gap: var(--space-4); }
form:has(input[name=role][value=contribute]:checked) .contrib { display: grid; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formnote { margin: 0; color: var(--danger); font-size: var(--text-label); min-height: 1.4em; }
.thanks {
  margin-top: var(--space-5); padding: var(--space-6); border-radius: 28px; outline: none;
  background: var(--positive-wash); color: var(--positive); box-shadow: var(--clay-raise);
  font-size: var(--text-lead); font-weight: var(--weight-medium);
}

/* The one action on the page, a Vis Vis slab. */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-lg); padding: var(--space-3) var(--space-6);
  background: var(--accent-bright); color: var(--ink); font: inherit; font-weight: var(--weight-heavy);
  font-size: var(--text-lead); cursor: pointer; text-decoration: none;
  box-shadow: inset 4px 4px 8px rgba(255, 250, 224, .8), inset -4px -4px 9px rgba(95, 76, 5, .18), 3px 5px 12px rgba(53, 48, 42, .16);
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--slow) var(--spring);
}
.cta:hover { background: #ffe88a; text-decoration: none; }
.cta:active { transform: scale(.96); background: #f6da6e; transition-duration: var(--fast);
  box-shadow: inset 3px 3px 7px rgba(95, 76, 5, .22), inset -2px -2px 5px rgba(255, 250, 224, .6); }
.cta:disabled { background: var(--surface-sunken); color: var(--ink-disabled); box-shadow: var(--clay-sink); cursor: progress; transform: none; }
.cta.small { font-size: var(--text-label); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); }
.join .cta { justify-self: start; }

.foot { margin-top: var(--space-8); padding-block: var(--space-5) var(--space-6); color: var(--ink-muted); font-size: var(--text-footnote); text-align: center; }

@media (max-width: 40rem) {
  .join form { padding: var(--space-5); }
  .world .controls { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .cta:active { transform: none; } }
@media (prefers-contrast: more), (forced-colors: active) {
  .join form, .thanks, .cta, .path li::before { outline: 2px solid var(--edge); }
  .join input, .join select, .join textarea { outline: 1px solid var(--edge); }
}