/* Coming-soon holding page. The full site lives in /site-draft. */
:root {
  --color-accent: #a8322d;
  --color-accent-strong: #8a2823;
  --color-bg: #ffffff;
  --color-surface: #f5f4f2;
  --color-text: #1f1d1b;
  --color-text-muted: #5a5652;
  --color-focus: #1a56db;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 1.25rem;
  --tap-size: 2.75rem;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.6; }
a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--gutter); max-width: 68.75rem; margin: 0 auto; }
.top img { display: block; }
.login { display: inline-flex; align-items: center; min-height: var(--tap-size); color: var(--color-accent); font-weight: 600; text-decoration: none; }
.login:hover { color: var(--color-accent-strong); text-decoration: underline; }
.soon { max-width: 68.75rem; margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; display: grid; gap: 2rem; align-items: center; }
h1 { margin: 0 0 1rem; color: var(--color-accent); font-size: clamp(2.125rem, 1.6rem + 2.6vw, 3.25rem); line-height: 1.15; }
.lede { margin: 0 0 1rem; font-size: 1.1875rem; max-width: 34rem; }
.small { margin: 0; color: var(--color-text-muted); font-size: 0.9375rem; }
.art { width: 100%; height: auto; max-width: 30rem; justify-self: center; }
@media (min-width: 48em) {
  .soon { grid-template-columns: 1fr 1fr; gap: 3rem; padding-top: 3rem; min-height: 60vh; }
}