@font-face { font-family: Fraunces; font-weight: 600; font-display: swap; src: url(/assets/fonts/fraunces-600.woff2) format("woff2"); }
@font-face { font-family: Manrope; font-weight: 500; font-display: swap; src: url(/assets/fonts/manrope-500.woff2) format("woff2"); }
@font-face { font-family: Manrope; font-weight: 700; font-display: swap; src: url(/assets/fonts/manrope-700.woff2) format("woff2"); }

/* The app's tokens, src/theme.ts: the peach paper, or the dark palette. */
:root {
  color-scheme: light dark;
  --page: #FDD4B3;
  --paper: url(/assets/paper.webp);
  --card: #F7BE96;
  --strong: #332B3A;
  --soft: #574D61;
  --violet: #5B41A0;
  --action: #332B3A;
  --body: 168px; /* Cadenza's body width: one size in every pose */
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #1D1922;
    --paper: url(/assets/paper-dark.webp);
    --card: #2A2431;
    --strong: #F4EEF6;
    --soft: #C8BED2;
    --violet: #C9B8F2;
    --action: #42366B;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--strong);
  background: var(--page) var(--paper) top center / 480px auto;
  font: 500 17px/1.6 Manrope, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: clamp(44px, 6.4vw, 76px); line-height: 1.04; }
h2 { font-size: clamp(26px, 2.6vw, 30px); line-height: 1.2; }
p { margin: 0; }
a { color: inherit; }
.wrap { width: 100%; max-width: 1136px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

.top { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; font: 600 23px Fraunces, Georgia, serif; letter-spacing: -0.02em; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.toplink { display: flex; align-items: center; min-height: 44px; padding-inline: 4px; font-weight: 700; font-size: 16px; text-underline-offset: 4px; }

.hero { display: grid; gap: 32px; padding-block: 28px 56px; }
.lead { max-width: 30em; margin-top: 18px; color: var(--soft); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; }
.soon { display: inline-block; margin-top: 24px; padding: 11px 20px; border-radius: 999px; color: #fff; background: var(--action); font-weight: 700; font-size: 16px; }

.sky { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 28px; background-size: cover; background-position: center; overflow: hidden; }
.sky-sunrise { background-image: url(/assets/sky-sunrise.webp); background-color: #E9A9D8; }
.sky-day { background-image: url(/assets/sky-day.webp); background-color: #7CC4FB; }
.sky-night { background-image: url(/assets/sky-night.webp); background-color: #5560D8; }
.hero-sky { min-height: 420px; padding: 32px 16px; gap: 22px; }
.bubble { padding: 12px 20px; border-radius: 26px; color: #332B3A; background: #fff; font: 600 21px/1.2 Fraunces, Georgia, serif; }

/* Height = body width / the drawing's BODY share (src/components/cadenza.tsx), so she is one size in every pose. */
.pose { width: auto; }
.pose-meditating { height: calc(var(--body) / 1.0725); }
.pose-hiker { height: calc(var(--body) / 0.8574); }
.pose-pool { height: calc(var(--body) / 0.868); }
.pose-scope { height: calc(var(--body) / 0.888); }

.features { display: grid; gap: 32px; padding-block: 16px 56px; }
.feature .sky { height: 280px; }
.feature h2 { margin-top: 22px; }
.feature p { margin-top: 8px; color: var(--soft); }

.private-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 28px; border-radius: 28px; color: #fff; background: #1D1922 url(/assets/sky-night.webp) right center / cover; overflow: hidden; }
.private-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 25, 34, 0.9) 45%, rgba(29, 25, 34, 0.45)); }
.private-words { position: relative; max-width: 30em; }
.private-words h2 { font-size: clamp(30px, 3.4vw, 40px); }
.private-words p { margin-top: 10px; font-size: 18px; }
.pose-asleep { position: relative; flex: none; width: auto; height: calc(var(--body) / 1.0945); }

.support { display: flex; align-items: center; gap: 24px; padding-block: 56px 40px; }
.pose-wave { flex: none; width: auto; height: calc(var(--body) / 0.9777); }
.support p { margin-top: 6px; color: var(--soft); }
.mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--violet); font-weight: 700; font-size: 18px; text-underline-offset: 4px; }

.foot { padding-block: 8px 40px; color: var(--soft); font-size: 15px; }
.foot p + p { margin-top: 6px; }

.lost { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 100vh; text-align: center; }

a:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

@media (max-width: 559px) {
  .private-card { flex-direction: column; align-items: flex-start; }
  .pose-asleep { align-self: center; }
  .private-card::before { background: rgba(29, 25, 34, 0.84); }
  .support { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 760px) {
  .features { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .feature .sky { height: 300px; }
}
@media (min-width: 900px) {
  :root { --body: 184px; }
  .hero { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; padding-block: 44px 72px; }
  .hero-sky { min-height: 460px; }
  .private-card { padding: 44px 56px; }
}