/* ezrahapp.com: the brand's colours (Warm Oat, Deep Pine, Warm Coral) and
   fonts (Fraunces for headings, DM Sans for text), served from here so no
   page asks a third party for anything. */
@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --bg: #F7F1E6; --raised: #FFFCF6; --sage: #E4EBDF; --line: #D9D2C5;
  --ink: #1C2C28; --ink2: #52645D; --pine: #164C45; --pine2: #103A35;
  --coral: #EC8C78; --coral-soft: #FBE4DC; --on-pine: #FFFFFF; --link: #164C45;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1F1C; --raised: #16302B; --sage: #1B3A33; --line: #2B4A43;
    --ink: #F2EDE3; --ink2: #B6C4BE; --pine: #2E7C70; --pine2: #24675D;
    --coral: #EC8C78; --coral-soft: #3A2A25; --on-pine: #FFFFFF; --link: #F2B4A6;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.6 "DM Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
}
a { color: var(--link); text-underline-offset: 2px; }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 16px; }

header.top { padding: 20px 0; }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: baseline; gap: 2px; font: 500 26px/1 "Fraunces", Georgia, serif; color: var(--ink); text-decoration: none; }
.brand i { width: 7px; height: 7px; border-radius: 50%; background: var(--pine); display: inline-block; transform: translateY(-14px); }
nav.top { display: flex; gap: 18px; font-size: 15px; }
nav.top a { color: var(--ink2); text-decoration: none; }
nav.top a:hover, nav.top a[aria-current] { color: var(--ink); }

h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 34px; margin: 24px 0 8px; }
h2 { font-size: 23px; margin: 40px 0 8px; }
h3 { font-size: 19px; margin: 28px 0 6px; }
li { margin: 6px 0; }
.meta { color: var(--ink2); font-size: 15px; }
main.doc { padding-bottom: 48px; }

/* Home */
.hero { padding: 40px 0 24px; }
.hero h1 { font-size: 44px; margin: 0 0 14px; }
.hero p.lede { font-size: 20px; color: var(--ink2); margin: 0 0 24px; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { display: inline-block; padding: 12px 20px; border-radius: 999px; background: var(--pine); color: var(--on-pine); text-decoration: none; font-weight: 600; font-size: 15px; }
.badge.soon { background: transparent; color: var(--ink2); border: 1px solid var(--line); font-weight: 400; }
.cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 32px 0; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { background: var(--raised); border: 1px solid var(--line); border-radius: 22px; padding: 20px; }
.card.sage { background: var(--sage); border-color: transparent; }
.card.coral { background: var(--coral-soft); border-color: transparent; }
.card h3 { margin: 0 0 6px; }
.card p { margin: 0; color: var(--ink2); font-size: 16px; }
.note { color: var(--ink2); font-size: 15px; }

footer.bottom { border-top: 1px solid var(--line); padding: 24px 0 40px; color: var(--ink2); font-size: 14px; }
footer.bottom .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer.bottom a { color: var(--ink2); }