/* site.css — the landing page's own layout; colours, type and spacing come from the brand tokens (/brand/brand.css). */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; display: flex; flex-direction: column; min-height: 100%;
  background: var(--bg); color: var(--text); font-family: var(--font-text);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: var(--s-10); }
.panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-6); }
/* tabs without a script: Members shows when the address ends in #members; otherwise About */
#members { display: none; }
#members:target { display: flex; }
#members:target ~ #about { display: none; }
.tabs { display: flex; justify-content: center; gap: var(--s-2); padding-top: var(--s-6); }
.tabs a { padding: var(--s-2) var(--s-5); border-radius: var(--r-pill); color: var(--text-dim); text-decoration: none; font-weight: 600; }
.tabs a:hover, .tabs a:focus-visible { background: var(--rain-100); color: var(--primary); outline: none; }
h2 { margin: 0; font-family: var(--font-display); font-size: var(--type-h1-size); line-height: var(--type-h1-lh); font-weight: var(--type-h1-weight); }
.note { margin: 0; max-width: 34rem; color: var(--text-dim); }
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); width: min(34rem, 100%); text-align: left; }
.links li { display: grid; gap: var(--s-1); padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.links a, .soonish { font-weight: 600; color: var(--primary); }
.soonish { color: var(--text-faint); }
.links span:last-child { color: var(--text-dim); font-size: var(--type-caption-size); }
.drop { width: 72px; height: 72px; }
h1 {
  margin: 0; font-family: var(--font-display); font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-lh);
  font-weight: var(--type-display-xl-weight); letter-spacing: var(--type-display-xl-track); text-wrap: balance;
}
.lead { margin: 0; max-width: 34rem; color: var(--text-dim); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); }
.soon {
  margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-6); border-radius: var(--r-pill);
  background: var(--rain-100); color: var(--primary); font-weight: 600; letter-spacing: 0.01em;
}
footer { padding-block: var(--s-7); text-align: center; color: var(--text-faint); font-size: var(--type-caption-size); }