/* ═══════════════════════════════════════════════════════════════════════════
   The pages beside the selling page: /privacy, /terms, /looks.

   IT LOADS assets/landing.css FIRST AND ADDS TO IT. The ground, the tokens,
   the type, the buttons and the footer are the selling page's, because these
   are the selling page's other pages and a privacy page in a different house
   style reads as a privacy page somebody else wrote. What is here is only what
   the selling page has no use for: long prose, a definition list, a draft
   banner and the gallery grid.

   MOBILE FIRST at 390px, the same width landing.css is written against.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the ground stops sooner here ───────────────────────────────────────── */
/* landing.css measured this and wrote it down: body copy over the horizon burn
   comes out at 6.05:1 where the same copy over the flat navy is 12.4:1, so the
   look belongs above the copy and nowhere else. The selling page's hero is
   fourteen viewport heights of nothing much and its ground can be 112vh. These
   pages start their prose a third of the way down, so the ground has to stop
   a third of the way down with it. The floor moves up by the same amount, and
   its own mask still fades it out at both ends. */
.ground { height: 34vh; }
.floor { top: 12vh; height: 20vh; }

/* ── the head of a page that is not the selling page ────────────────────── */
.page-head { padding-top: 6vh; padding-bottom: 8px; }
.page-head h1 { font-size: clamp(1.9rem, 7vw, 2.8rem); max-width: 22ch; }
.page-head .lede { margin-top: 12px; }
/* When it was last written. Small, under the title, and not a byline. */
.page-when {
  font-family: var(--head); font-weight: 600; font-size: .7rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sky-faint);
  margin-top: 16px;
}

/* ── prose ──────────────────────────────────────────────────────────────── */
/* 66 characters is the measure body text is read at. The h2 sits on a rule
   because these pages are a sequence of answers and a reader scanning for
   theirs needs the edges of each one. */
.prose { padding-bottom: 40px; }
.prose > * { max-width: 66ch; }
.prose h2 {
  font-size: clamp(1.15rem, 4.4vw, 1.5rem);
  margin: 40px 0 12px; padding-top: 18px;
  border-top: 1px solid var(--sky-line);
}
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 24px; }
.prose p { color: var(--sky-muted); margin-top: 12px; font-size: 1rem; }
.prose p strong { color: #fff; font-weight: 600; }
.prose a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: #fff; }
.prose ul { list-style: none; margin-top: 14px; }
.prose ul li {
  color: var(--sky-muted); font-size: .98rem; line-height: 1.5;
  padding: 11px 0 11px 18px; border-top: 1px solid var(--sky-line);
  position: relative;
}
.prose ul li:last-child { border-bottom: 1px solid var(--sky-line); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 7px; height: 7px; background: var(--gold);
}
.prose ul li strong { color: #fff; font-weight: 600; }
/* One last line in small print, for the sentence that is about the page
   rather than in it. */
.prose .fine { color: var(--sky-faint); font-size: .84rem; margin-top: 28px; }

/* ── the draft banner ───────────────────────────────────────────────────── */
/* Loud on purpose, and above the title rather than beside it: a draft that a
   reader can finish the page without noticing is a draft in force. */
.draft {
  max-width: var(--wide); margin: 22px auto 0; padding: 0 var(--gut);
  position: relative; z-index: 3;
}
.draft-in {
  background: rgba(200, 37, 15, .22); border: 2px solid var(--orange);
  padding: 14px 16px; display: grid; gap: 6px;
}
.draft-tag {
  font-family: var(--head); font-weight: 700; font-size: .78rem;
  letter-spacing: .2em; text-transform: uppercase; color: #ffd8d0;
}
.draft-in p { color: #ffe9e4; font-size: .92rem; line-height: 1.5; max-width: 60ch; }

/* ── the gallery ────────────────────────────────────────────────────────── */
.fam { padding-top: 48px; padding-bottom: 8px; }
.fam h2 { font-size: clamp(1.2rem, 4.6vw, 1.6rem); }
.fam-blurb { color: var(--sky-muted); font-size: .96rem; max-width: 60ch; margin-top: 10px; }
.fam-count {
  font-family: var(--head); font-weight: 600; font-size: .7rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}

/* THE FAMILY'S BACKDROP, ON ITS OWN. A poll still is two thirds poll, so the
   one thing fifty of them cannot show is the picture behind the round. These
   are that picture with no type over it, at the size a thumbnail reads at.

   A row that scrolls sideways rather than a grid, because every family but one
   has exactly one of these and `scenes` has four: a grid would leave three
   holes in eight headings to keep the fourth tidy. The scroll is inside the
   list, so the page itself still never moves sideways. */
.fam-stages {
  list-style: none; margin: 16px 0 0; padding: 0 0 4px;
  display: flex; gap: 14px; overflow-x: auto;
  scrollbar-width: thin;
}
.fam-stages li { flex: 0 0 auto; width: 200px; }
.fam-stages figure { margin: 0; }
.fam-stages img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border: 1px solid var(--sky-line);
  background: rgba(255, 255, 255, .04);
}
.fam-stages figcaption { margin-top: 6px; font-size: .74rem; line-height: 1.45; }
.stage-name {
  font-family: var(--head); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold);
}
.stage-blurb { color: var(--sky-faint); }

/* One column on a phone, because a 1280x720 projector still at half of a
   390px screen is a still nobody can read. */
.looks-grid { list-style: none; display: grid; gap: 22px; margin-top: 20px; }
.looks-grid figure { margin: 0; }
.looks-grid img {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  border: 1px solid var(--sky-line);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 4px 4px 0 rgba(0, 33, 165, .5);
  /* Fifty images on one page: every one of them is lazy, and the box is
     reserved by the aspect ratio so nothing on the page moves as they land. */
  background: rgba(255, 255, 255, .04);
}
.looks-grid figcaption { margin-top: 10px; display: grid; gap: 4px; }
.look-name {
  font-family: var(--head); font-weight: 700; font-size: 1rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.look-blurb { color: var(--sky-faint); font-size: .86rem; line-height: 1.5; max-width: 52ch; }

/* ── wider than a phone ─────────────────────────────────────────────────── */
@media (min-width: 700px) {
  .looks-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (min-width: 1000px) {
  .page-head { padding-top: 10vh; }
  .fam { padding-top: 72px; }
}