/*
 * Keepnook's small public site.
 *
 * Colours and proportions are the app's own — `lib/theme.ts` is the source, and
 * the paper is the splash background from `app.json` (#FBFAF8). Type is the
 * system stack on purpose: the app uses Playfair Display and Inter, and a
 * webfont on a site whose main purpose is a privacy policy would be a request
 * to somebody else's server on every page load. A system serif carries the
 * display voice near enough.
 */

:root {
  --paper: #fbfaf8;
  --surface: #ffffff;
  --ink: #232323;
  --secondary: #6e6e6c;
  --hairline: #ecebe8;
  --periwinkle: #6e7bc4;
  --periwinkle-dark: #5a66ac;
  --chip: #f1efeb;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
    "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  /* The app's page never goes edge to edge either. */
  padding: 0 20px 64px;
}

/* ---- the measure ------------------------------------------------------- */

main,
.masthead,
footer {
  /* ~68 characters at 17px: a page of prose, not a wall of it. */
  max-width: 34rem;
  margin: 0 auto;
}

main {
  padding-top: 8px;
}

/* ---- masthead ---------------------------------------------------------- */

.masthead {
  padding: 28px 0 4px;
}

.masthead a {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}

.masthead a:hover {
  color: var(--periwinkle-dark);
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 2;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
}

/* ---- type -------------------------------------------------------------- */

h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 28px 0 8px;
}

.about h1 {
  font-size: 2.6rem;
  margin-top: 56px;
}

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 40px 0 8px;
}

p {
  margin: 0 0 16px;
}

.lede {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--secondary);
  margin-bottom: 32px;
}

/* The italic line under the title of the policy and the terms is their date. */
main > p > em:only-child {
  color: var(--secondary);
  font-style: normal;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

strong {
  font-weight: 600;
}

ul,
ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

li {
  margin-bottom: 10px;
}

li::marker {
  color: var(--secondary);
}

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 40px 0;
}

a {
  color: var(--periwinkle-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--ink);
}

a:focus-visible,
.masthead a:focus-visible {
  outline: 2px solid var(--periwinkle);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- the App Store card ------------------------------------------------ */

/*
 * Keepnook shipped on 12 September 2026, so the card that said "Coming to the
 * App Store" and linked nowhere now carries the link itself. It is still a
 * card rather than a button, and the link is text in the site's own type: no
 * Apple badge artwork, for the same reason there is no `og:image` — see
 * `site/README.md`. The link inherits the page's own `a` colour, so nothing
 * here is a second visual style.
 */
.appbox {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 24px 0 28px;
}

.appbox-status {
  font-family: var(--serif);
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.appbox-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--periwinkle);
  margin-right: 10px;
  vertical-align: 0.15em;
}

.appbox-note {
  margin: 0;
  color: var(--secondary);
  font-size: 0.95rem;
}

/* ---- footer ------------------------------------------------------------ */

footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 0.9rem;
  color: var(--secondary);
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-bottom: 12px;
}

footer nav a {
  color: var(--secondary);
}

footer nav a:hover {
  color: var(--ink);
}

footer nav [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.colophon {
  margin: 0;
  line-height: 1.5;
}

.colophon a {
  color: var(--secondary);
}

/* ---- phone ------------------------------------------------------------- */

@media (max-width: 480px) {
  body {
    font-size: 16px;
    padding: 0 18px 48px;
  }

  .about h1 {
    font-size: 2.1rem;
    margin-top: 36px;
  }

  h1 {
    font-size: 1.7rem;
  }

  h2 {
    font-size: 1.2rem;
    margin-top: 32px;
  }
}

/* ---- print ------------------------------------------------------------- */

/*
 * A privacy policy and a set of terms get printed and filed. On paper the
 * footer's navigation is four words that go nowhere, so it goes; the address
 * stays, because that is the part somebody reading it on paper needs.
 */
@page {
  /* The paper's own margin. Without it the browser's default is all there is,
     and the measure runs the full width of the sheet. */
  margin: 18mm 16mm;
}

@media print {
  body {
    background: #ffffff;
    color: #000000;
    font-size: 10.5pt;
    line-height: 1.5;
    padding: 0;
  }

  main,
  .masthead,
  footer {
    max-width: none;
  }

  .skip,
  footer nav {
    display: none;
  }

  a {
    color: #000000;
    text-decoration: none;
  }

  /* A link on paper has to say where it went, but only if it goes off-page. */
  a[href^="http"]::after,
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  a[href^="mailto:"]::after {
    content: "";
  }

  h1,
  h2 {
    break-after: avoid;
    page-break-after: avoid;
  }

  ul,
  ol,
  li,
  p {
    break-inside: avoid;
  }

  hr {
    border-top-color: #cccccc;
    margin: 20pt 0;
  }

  .appbox {
    border: 1px solid #cccccc;
  }
}