/* readmanna.com, in Manna's own colours (src/theme.js): the Honeycomb mesh
   for the front page, as the app opens, the warm paper rooms for the pages you read, and the
   charcoal rooms at night. */
:root {
  --honey: #E2BD78;
  --honey-mesh:
    radial-gradient(100vw 100vw at 22% 7%, #F8EEDA 0%, rgba(248, 238, 218, 0) 100%),
    radial-gradient(85vw 85vw at 100% 34%, #E2B9AB 0%, rgba(226, 185, 171, 0) 100%),
    radial-gradient(100vw 100vw at 84% 102%, #DCA889 0%, rgba(220, 168, 137, 0) 100%),
    radial-gradient(90vw 90vw at 0% 78%, #DFB06A 0%, rgba(223, 176, 106, 0) 100%),
    #E2BD78;
  --on-honey: #2F3036;
  --on-honey-muted: rgba(47, 48, 54, 0.86);
  --bg: #F5F1EA;
  --surface: #FBF9F4;
  --ink: #2F3036;
  --muted: #62655A;
  --hairline: rgba(47, 48, 54, 0.11);
  --serif: "Newsreader", "New York", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1D1E22;
    --surface: #2A2B31;
    --ink: #EDE6DA;
    --muted: #A2A498;
    --hairline: rgba(237, 230, 218, 0.11);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* The front page: the Honeycomb mesh, as the app opens, in ink. */
body.front {
  background: var(--honey-mesh);
  background-attachment: fixed;
  color: var(--on-honey);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.front main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px 32px;
}
.front .icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.front h1 {
  font: 600 56px/1.05 var(--serif);
  letter-spacing: -0.01em;
  margin: 28px 0 6px;
}
.front .tagline {
  font: 400 22px/1.3 var(--serif);
  color: var(--on-honey-muted);
  margin: 0;
}
.front .about {
  max-width: 30em;
  margin: 28px 0 0;
  color: var(--on-honey-muted);
}
.front .soon {
  margin: 32px 0 0;
  font-size: 15px;
  color: var(--on-honey-muted);
}
.front footer { color: var(--on-honey-muted); }

/* The pages you read: privacy, support. */
.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px 24px;
}
.page .home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 600 20px/1 var(--serif);
}
.page .home img { width: 32px; height: 32px; border-radius: 8px; }
.page h1 {
  font: 600 40px/1.1 var(--serif);
  letter-spacing: -0.01em;
  margin: 48px 0 8px;
}
.page .date { color: var(--muted); margin: 0 0 32px; font-size: 15px; }
.page h2 {
  font: 600 24px/1.25 var(--serif);
  margin: 40px 0 8px;
}
.page p, .page li { margin: 0 0 14px; }
.page ul { padding-left: 1.2em; margin: 0 0 14px; }
.page .lede { font-size: 19px; }

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  padding: 32px 20px max(32px, env(safe-area-inset-bottom));
  font-size: 15px;
  color: var(--muted);
}
.page + footer { border-top: 1px solid var(--hairline); max-width: 640px; margin: 24px auto 0; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }