@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-800.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #f6f5f1;
  --card: #ffffff;
  --fg: #15172a;
  --muted: #4a4d66;
  --rule: #d9d6cc;
  --amber: #8a4a05;
  --amber-bg: #fbebd3;
  --focus: #2f7dbe;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15172a;
    --card: #1d2038;
    --fg: #f3f1ec;
    --muted: #b7b9cc;
    --rule: #2e3252;
    --amber: #f5a524;
    --amber-bg: #3a2e14;
    --focus: #7cc4ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15172a;
  --card: #1d2038;
  --fg: #f3f1ec;
  --muted: #b7b9cc;
  --rule: #2e3252;
  --amber: #f5a524;
  --amber-bg: #3a2e14;
  --focus: #7cc4ff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: inherit; text-underline-offset: 0.2em; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; background: var(--card); padding: 0.5rem 0.75rem; }
.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }
header.hero { padding: 4.5rem 0 3rem; text-align: center; }
header.hero img { display: block; width: 120px; height: auto; margin: 0 auto; }
.soon {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--amber-bg);
  color: var(--amber);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
h1, h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
h1 { font-size: clamp(2.5rem, 9vw, 4.25rem); margin: 1rem 0 0.75rem; }
.lede { max-width: 36rem; margin: 0 auto; font-size: 1.25rem; color: var(--muted); }
main { padding-bottom: 4rem; }
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.cards li {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
h2 { font-size: 1.5rem; margin: 0; }
.tag { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--amber); }
.cards p { margin: 0; color: var(--muted); }
.what { max-width: 40rem; margin: 3.5rem auto 0; text-align: center; }
.what h2 { margin: 0 0 0.75rem; }
.what p { margin: 0 0 0.75rem; color: var(--muted); }
footer { border-top: 1px solid var(--rule); padding: 1.5rem 0 2.5rem; font-size: 0.9375rem; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}