/* Pennyglot's pages: system fonts, the lockup in the header, emerald only there (DESIGN.md). */
:root {
  color-scheme: light dark;
  --ink: #0b3d2a;
  --text: #1d1d1f;
  --muted: #5c5c61;
  --page: #ffffff;
  --band: #eaf8f1;
  --rule: rgba(0, 0, 0, 0.1);
  --select: #d2d2d7;
  --edge: 0 0 0 1px rgba(0, 0, 0, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --page: #000000;
    --band: #0b3d2a;
    --rule: rgba(255, 255, 255, 0.14);
    --select: #3a3a3c;
    --edge: 0 0 0 1px rgba(255, 255, 255, 0.24);
  }
  .lockup-light, .badge-light { display: none; }
}

@media (prefers-color-scheme: light) {
  .lockup-dark, .badge-dark { display: none; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

::selection { background: var(--select); color: var(--text); }

header {
  background: var(--band);
  padding: 28px 24px;
}

header img {
  display: block;
  height: 48px;
  width: auto;
}

main, footer {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

main { padding-top: 12px; }

h1 { font-size: 30px; line-height: 1.2; margin: 24px 0 4px; }
h2 { font-size: 19px; margin: 28px 0 6px; }
p, li { margin: 0 0 12px; }
.updated, footer { color: var(--muted); font-size: 15px; }
footer { padding-top: 24px; padding-bottom: 40px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
code { font-size: 15px; }

/* The home pages: the app's own screens, and the App Store badge as the one action. */
main:has(> .home), main:has(> .home) + footer { max-width: 1040px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 64px;
  align-items: center;
  padding: 48px 0 80px;
}

.hero h1 {
  font-size: clamp(40px, 5.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  text-wrap: balance;
}

.lede { font-size: 21px; line-height: 1.45; max-width: 31em; margin: 0 0 32px; text-wrap: pretty; }
.badge { margin: 0 0 16px; }
.badge a { display: inline-block; border-radius: 9px; }
.badge img { height: 52px; width: auto; vertical-align: top; }
.facts { color: var(--muted); font-size: 15px; margin: 0; }

.screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14% / 6.45%;
  box-shadow: var(--edge);
}

.hero .screen { justify-self: end; }

.screens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 264px));
  justify-content: space-between;
  gap: 40px;
}
.shot h2 { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; margin: 32px 0 8px; text-wrap: balance; }
.shot p { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 0; max-width: 30em; }
.note { color: var(--muted); font-size: 14px; margin: 32px 0 0; }

.notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}

.notes h2 { margin-top: 0; }
.notes p { max-width: 34em; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 32px 0 56px; }
  .hero .screen { justify-self: center; width: min(76vw, 300px); }
  .lede { font-size: 19px; }
  .screens { grid-template-columns: 1fr; gap: 56px; }
  .shot .screen { width: min(76vw, 300px); margin: 0 auto; }
  .notes { grid-template-columns: 1fr; gap: 8px; margin-top: 56px; }
}