*,*::before,*::after{box-sizing:border-box}

:root{
  --ink:#17203d;
  --dawn:#fceedf;
  --bg:var(--dawn);
  --fg:var(--ink);
  --accent:#a8491a;
  --rule:rgba(127,134,196,.3);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:var(--ink);
    --fg:var(--dawn);
    --accent:#f5b27a;
    --rule:rgba(127,134,196,.35);
  }
}

html{background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

main,header,footer{max-width:700px;margin:0 auto;padding-left:16px;padding-right:16px}

header{display:flex;align-items:center;gap:12px;padding-top:28px;padding-bottom:14px}
header img{width:36px;height:36px;border-radius:9px;display:block}
header strong{font-size:18px;letter-spacing:.01em}
header nav{margin-left:auto;display:flex;gap:2px}
header nav a{padding:10px 8px;font-size:15px;text-decoration:none}
header nav a:hover{text-decoration:underline}

main{padding-top:8px;padding-bottom:56px}

h1{
  font-family:Charter,Georgia,"Times New Roman",serif;
  font-size:clamp(30px,7vw,44px);
  line-height:1.12;
  margin:.2em 0 .25em;
}
h2{
  font-family:Charter,Georgia,"Times New Roman",serif;
  font-size:21px;
  line-height:1.25;
  margin:1.9em 0 .5em;
}

p,li{max-width:66ch}
ul{padding-left:1.1em;margin:1em 0}
li{margin-bottom:12px}

.meta{font-size:14px;opacity:.7;margin:-.2em 0 1.6em}

footer{
  font-size:13px;
  opacity:.72;
  padding-top:22px;
  padding-bottom:40px;
  margin-top:8px;
  border-top:1px solid var(--rule);
}
footer p{max-width:60ch;margin:.6em 0}
footer a{color:inherit}

/* Landing page */
.hero{text-align:center;padding:11vh 16px 6vh}
.hero img{width:92px;height:92px;border-radius:21px;margin-bottom:22px}
.hero h1{margin:0 0 8px}
.hero .tagline{font-size:19px;opacity:.88;margin:0 0 30px}

.points{
  list-style:none;
  padding:0;
  margin:0 auto 30px;
  max-width:440px;
  display:grid;
  gap:14px;
  text-align:left;
  font-size:16px;
}
.points li::before{content:"\2022";color:var(--accent);margin-right:.6em}

.store-status{font-size:14px;opacity:.68;margin:0 0 30px;letter-spacing:.01em}

.links{display:flex;gap:22px;justify-content:center;font-size:15px;margin-bottom:8px}

/* 404 */
.notfound{text-align:center;padding:14vh 16px}
.notfound h1{margin-bottom:.3em}