/*
  The one place on this site where the two apps are described together. It
  appears on both landing pages, so it lives in its own file rather than inside
  home.css or policy.css, each of which belongs to a single page.

  Every colour here is a token from base.css. src/guards/site-brand.test.ts
  fails on a colour literal written in any stylesheet in this folder.
*/

.pair {
  margin: 3rem 0 0;
  padding: 1.5rem;
  background: var(--surface);
  border-radius: var(--radius-surface);
}

.pair h2 {
  margin-top: 0;
}

.pair p:last-child {
  margin-bottom: 0;
}

/* Each app named on its own line, so the separation is visible before it is read. */
.pair-apps {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.pair-apps li {
  border-top: 1px solid var(--rule);
  padding-top: 0.8rem;
  margin-bottom: 0.9rem;
}

.pair-apps li:last-child {
  margin-bottom: 0;
}

.pair-apps .app {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.3;
  display: block;
  margin-bottom: 0.1rem;
}

.pair-apps p {
  margin: 0;
}

/*
  Both apps named at the top of every landing page. Without this the only route
  from one to the other sat 79% down the page, which is not discovery: a visitor
  had to scroll two screens past the fold to learn the second app exists.

  The page you are on is a span rather than a link, so the masthead also says
  where you are. Order is fixed, Tiny Doors then Quiet Proof, so it reads the
  same on both pages. The separator is drawn in CSS rather than typed into the
  markup, so the two names stay clean text for a screen reader.
*/
.apps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem 0;
  font-size: 0.9375rem;
}

.apps > * + *::before {
  content: '\00B7';
  color: var(--ink-muted);
  margin-right: 0.85rem;
}

.apps .here {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--ink);
}

.apps a {
  color: var(--ink-muted);
  text-decoration: none;
}

.apps a:hover {
  color: var(--lamp-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}