/* The ribbino.com pages. The colours are the brand's (brand/logo/README.md)
   and the app's card and soft ink (app/lib/theme/tokens.dart). The light link
   is a darker plum than the brand's, for 4.5:1 contrast on linen. */
:root {
  --linen: #F4EDE1;
  --card: #FFFBF4;
  --ink: #2B2A33;
  --muted: #655D6D;
  --link: #7E44BC;
  --rule: #E2D6C2;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --linen: #1F1B26;
    --card: #2B2635;
    --ink: #F2ECE2;
    --muted: #B3AABD;
    --link: #C9A6F0;
    --rule: #3B3446;
  }
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--link); text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }

.page { max-width: 42rem; margin: 0 auto; padding: 2rem 16px 3rem; }
.page header { margin-bottom: 2rem; }
.page header img { display: block; width: 240px; height: auto; }

h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 0.5rem; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 2rem 0 0.5rem; }
p, ul { margin: 0 0 1rem; }
ul { padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }
.updated { color: var(--muted); font-size: 0.9375rem; }
.summary {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.summary p:last-child { margin-bottom: 0; }

footer {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding-top: 1rem;
  color: var(--muted);
  font-size: 0.9375rem;
}
footer p { margin: 0; }

/* The home page. */
.home {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem 16px;
  text-align: center;
}
.home h1 { margin: 0; line-height: 0; }
.home img { width: min(320px, 80vw); height: auto; }
.home p { margin: 0; max-width: 28rem; }
.home footer { border: 0; margin-top: 1rem; padding: 0; }