/* The furniture the public pages share.

   There are five of them now — /about, /tour, /couples, /install, /privacy and
   /terms — and they are the whole of Pairstead that somebody can read without an
   account. legal.css is the paper and the ink and came first, for the two legal
   pages; this is the parts the newer ones needed and those two did not: the
   band offering the app, the row of links between the pages, and the phone
   frames the tour is photographed into.

   No web font here either, for the same reason legal.css names none: somebody
   deciding whether to trust Pairstead should not have their visit announced to
   Google before they have decided. */

/* --------------------------------------------------------- get the app */

/* Deliberately the first thing on the page and deliberately loud. A visitor who
   has decided in the first ten seconds that they want this should not have to
   scroll to find out it goes on a phone. */
.appbar{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-left:5px solid var(--terracotta);
  border-radius:18px;
  padding:20px 24px;
  margin:0 0 34px;
}
.appbar__mark{ flex:none; display:block; }
.appbar__words{ flex:1 1 260px; min-width:0; }
.appbar__head{
  display:block;
  font-family:var(--font-display);
  font-size:1.15rem; font-weight:600;
  letter-spacing:-.015em;
  color:var(--ink);
  margin-bottom:2px;
}
.appbar__sub{
  display:block;
  font-size:.9rem;
  color:var(--ink-soft);
  line-height:1.5;
}
.appbar__go{
  flex:none;
  display:inline-block;
  background:var(--terracotta);
  color:var(--paper);
  text-decoration:none;
  font-size:.98rem; font-weight:600;
  padding:12px 24px;
  border-radius:12px;
  border:1.5px solid var(--terracotta-deep);
}
.appbar__go:hover{ background:var(--terracotta-deep); color:var(--paper); }

/* ------------------------------------------------- the row between pages */

/* Every public page carries the same row, so none of them is a dead end. The
   page you are on is in it too, marked rather than removed — a row that changes
   shape from page to page is a row nobody learns. */
.sitenav{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:0 0 30px;
  padding-bottom:18px;
  border-bottom:1.5px solid var(--line);
  font-size:.9rem;
}
.sitenav a{ text-decoration:none; color:var(--ink-soft); }
.sitenav a:hover{ color:var(--terracotta-deep); text-decoration:underline; }
.sitenav a[aria-current="page"]{
  color:var(--ink);
  font-weight:600;
  text-decoration:none;
}

/* ------------------------------------------------------- a list of parts */

.toc{
  list-style:none;
  margin:0 0 34px;
  padding:0;
  columns:2;
  column-gap:26px;
  font-size:.95rem;
}
.toc li{ margin:0 0 7px; break-inside:avoid; }

/* --------------------------------------------------------------- the tour */

/* legal.css holds every page to 660px, which is the right measure for reading
   a page of prose. The tour is not prose — it is a phone next to a paragraph,
   twice, and at 660px the paragraph ends up four words wide. */
.page--wide{ max-width:920px; }

/* One real screen and what it is. Alternating sides on a wide window, stacked
   on a phone — which is where most people reading this will be, holding the
   thing the pictures are of. */
.shot{
  display:grid;
  grid-template-columns:270px 1fr;
  gap:34px;
  align-items:center;
  margin:0 0 52px;
}
.shot:nth-child(even){ grid-template-columns:1fr 270px; }
.shot:nth-child(even) .shot__frame{ order:2; }

/* The bezel. A screenshot floating on the page reads as a picture of a website;
   the same screenshot in a frame reads as a phone, which is what it is. */
.shot__frame{
  background:var(--panel);
  border-radius:30px;
  padding:9px;
  box-shadow:0 12px 34px rgba(30,26,20,.16);
}
.shot__frame img{
  display:block;
  width:100%;
  height:auto;
  border-radius:22px;
  /* The screenshots are 414px wide and shown at 252, so the browser is always
     scaling down — which it does well. Never up. */
}

.shot__what h2{
  border-top:none;
  padding-top:0;
  margin:0 0 10px;
  font-size:1.4rem;
}
.shot__what p{ font-size:1rem; }
.shot__what p:last-child{ margin-bottom:0; }

/* The one line under a picture that says what to look at in it. */
.shot__note{
  font-size:.9rem;
  color:var(--ink-faint);
  border-left:3px solid var(--line);
  padding-left:14px;
  margin-top:14px;
}

@media (max-width:640px){
  .shot,
  .shot:nth-child(even){
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:44px;
  }
  .shot:nth-child(even) .shot__frame{ order:0; }
  .shot__frame{ max-width:290px; margin:0 auto; }
}

@media (max-width:520px){
  .toc{ columns:1; }
  .appbar{ padding:18px 20px; gap:14px; }
  .appbar__go{ width:100%; text-align:center; }
}