/* Tokens from Rivalta DESIGN.md (household overlay). */
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
:root {
  --ink: #F5F5F7;
  --ink-muted: #B4B4BA;
  --surface: #0E0E10;
  --line: #76767F;
  --brand: #C9A24E;
  --focus: #C9A24E;
  --space: 4px;
  --rounded-control: 12px;
  --measure: 36rem;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
main {
  flex: 1;
  width: 100%;
  max-width: calc(var(--measure) + 2 * 4 * var(--space));
  margin: 0 auto;
  padding: calc(24 * var(--space)) calc(4 * var(--space)) calc(12 * var(--space));
}
.mark { display: block; width: 168px; height: auto; margin-bottom: calc(12 * var(--space)); }
h1 {
  margin: 0 0 calc(6 * var(--space));
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
}
p { margin: 0 0 calc(4 * var(--space)); color: var(--ink-muted); }
.status { color: var(--ink); font-weight: 500; }
a {
  color: var(--brand);
  text-underline-offset: 3px;
  border-radius: 4px;
  display: inline-block;
  min-height: 24px;
}
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
footer {
  padding: calc(6 * var(--space)) calc(4 * var(--space));
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.875rem;
  text-align: center;
}
@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
  main { padding-top: calc(36 * var(--space)); }
}