/* Matisse + Meadow — the default theme. Roles mirror apps/mobile/src/theme/palettes.ts. */
:root {
  --sky: #a7d8f0;
  --sky2: #dceff9;
  --cloud: #ffffff;
  --frame: #cfe3b8;
  --frame2: #b5d39a;
  --land: #6faf6b;
  --land2: #4e8f52;
  --bloom: #f2b8a2;
  --bloom2: #f7dc8c;
  --light: #ffffff;
  --dark: #2f4a33;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  background: var(--sky2);
  color: var(--dark);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.hero,
.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 100vh;
}
.window {
  width: 152px;
  height: 152px;
  border-radius: 31px;
  overflow: hidden;
  box-shadow:
    0 2px 5px rgba(47, 74, 51, 0.08),
    0 26px 56px -20px rgba(47, 74, 51, 0.3);
  margin-bottom: 18px;
}
.window svg {
  width: 100%;
  height: 100%;
  display: block;
}
h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}
.lede {
  font-size: 1.15rem;
  margin: 0;
  max-width: 36ch;
}
.note {
  margin: 0;
  opacity: 0.7;
  font-size: 0.95rem;
}
.foot {
  margin-top: auto;
  padding-top: 40px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  opacity: 0.8;
}
.foot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.foot a:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 3px;
}
.page h1 {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
}
.page p,
.page li {
  max-width: 62ch;
}
.page a {
  color: inherit;
}
@media (prefers-reduced-motion: no-preference) {
  .drift {
    animation: drift 28s ease-in-out infinite alternate;
  }
  @keyframes drift {
    from {
      transform: translateX(-5%);
    }
    to {
      transform: translateX(5%);
    }
  }
}