:root {
  color-scheme: light;
  --paper: #f6daca;
  --ink: #58342f;
  --faded-ink: #7a504a;
  --line: #ddc2b4;
  --link: #3a1e1a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-serif, "Hiragino Mincho ProN", "Yu Mincho", serif;
  line-height: 1.8;
}

.page {
  width: min(100% - 32px, 44rem);
  margin: 0 auto;
  padding: 48px 0 64px;
}

header,
section,
footer {
  border-bottom: 1px solid var(--line);
  padding: 0 0 28px;
  margin: 0 0 28px;
}

h1,
h2,
p { margin-top: 0; }

h1 { font-size: clamp(2rem, 6vw, 3rem); letter-spacing: 0.08em; }
h2 { font-size: 1.2rem; letter-spacing: 0.04em; }
.eyebrow { color: var(--faded-ink); letter-spacing: 0.15em; }

a {
  color: var(--link);
  text-underline-offset: 0.18em;
}

a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .page { width: min(100% - 24px, 44rem); padding-top: 32px; }
}

.related-apps { margin: 3rem 0; padding: 1.5rem 0; }
.related-apps ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); gap:1.5rem; padding:0; list-style:none; }
.related-apps a { text-decoration:underline; text-underline-offset:.2em; font-weight:700; }
.related-apps p { margin:.5rem 0 0; font-size:1rem; line-height:1.7; }

.app-store-button { display:inline-block; padding:.8rem 1.25rem; background:var(--ink); color:var(--paper); border-radius:.4rem; font-weight:700; text-decoration:none; }