/* Privacy page: its own rules only. The header, the footer, the grounds,
   the type roles and every color come from /styles.css.

   The page answers two questions a careful reader brings to it: what does
   the app keep on my computer, and what goes over the network. So it reads
   as a ledger, not a wall of policy: a left column of section headings
   beside one reading column, and inside each section a list on hairlines,
   one entry per thing kept or connection made. The network section stands
   on the night ground, the way the home page dims the lights for what it
   shows, and ends on the page's one loud line.

   The page's own rules use no amber. On this site amber means an agent
   is waiting for you, and nothing on this page is. The exception is the
   mark's amber facet in the header and the footer, which stands for the
   pane where an agent waits. */

/* The hero: the page's name and the one paragraph that answers it. Short,
   so the first section is close below it. The shared stylesheet draws a
   field of dots behind every page's first section and veils it where the
   text stands; its default veil suits a tall hero with text at the top, so
   here the veil is centered on this hero's own text block, wide enough that
   no dot sits behind a line. Under 1024px the text fills the whole width,
   so the veil does too. */

.pv-hero {
  --field-veil-at: 50% 50%;
  --field-veil-size: 120% 100%;
  padding-block: clamp(48px, 6vw, 96px) clamp(40px, 4vw, 56px);
}

@media (min-width: 1024px) {
  .pv-hero {
    --field-veil-at: 40% 48%;
    --field-veil-size: 95% 58%;
  }
}

.pv-hero-grid {
  display: grid;
  gap: var(--s3);
}

.pv-hero h1 {
  font-size: var(--fs-h1);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.pv-hero .lead {
  margin-top: 0;
}

/* On wide screens the name and its date line take the left column and the
   paragraph the right, on the same split as the sections below, so the
   headings and the reading column keep one edge from top to bottom. */
@media (min-width: 1024px) {
  .pv-hero-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--split-gap);
  }

  .pv-hero h1 {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  /* The paragraph is taller than the name and the date line together, so
     the two rows share the extra height; the date line sits at the foot of
     its row, level with the paragraph's last line. */
  .pv-hero .updated {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
  }

  .pv-hero .lead {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin-top: 0;
  }
}

/* A section: its heading, then its content. From 1024px the heading moves
   to the left column, and its first line shares a baseline with the first
   line beside it. */

.pv-split {
  display: grid;
  gap: var(--s5);
}

.pv-split > h2 {
  max-width: 18ch;
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
  .pv-split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--split-gap);
    align-items: baseline;
  }
}

/* The paper parts. The sections inside one part are parted by a rule
   across the content width; the change of ground parts the rest. */

/* The wrapper adds no space of its own: the space between two sections is
   the lower one's top padding and the upper one's bottom padding, 112px at
   most on one ground and 160px at most where the ground changes. The first
   section of a part follows a change of ground, so it opens on the larger
   top. */

.pv-doc .pv-split {
  padding-block: clamp(40px, 4vw, 56px);
}

.pv-doc > .pv-sec:first-child .pv-split {
  padding-top: var(--section-tight);
}

.pv-sec + .pv-sec .pv-split {
  border-top: 1px solid var(--line-strong);
}

/* The ledger: a term and what it means, on hairlines. Side by side once
   the column can hold both at a readable measure. */

.pv-ledger > div {
  display: grid;
  gap: var(--s1) var(--s5);
  padding-block: var(--s4) var(--s5);
}

.pv-ledger > div:first-child {
  padding-top: 0;
}

.pv-ledger > div:last-child {
  padding-bottom: 0;
}

.pv-ledger > div + div {
  border-top: 1px solid var(--line);
}

.pv-ledger dt {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}

.pv-ledger dd {
  color: var(--ink);
}

.pv-ledger dd > p + p {
  margin-top: var(--s3);
}

@media (min-width: 600px) {
  .pv-ledger > div {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: baseline;
  }
}

/* Folder and file names are literal names to look for on disk, so they are
   set in the page's monospace, on a quiet field that keeps a leading dot in
   view. */
.pv-doc code {
  padding: 0 0.3em;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--white);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.95em;
  white-space: nowrap;
}

/* The network section, on the night ground */

.pv-net {
  padding-block: var(--section) var(--section-tight);
}

.pv-intro {
  margin-bottom: var(--s5);
  color: var(--night-body);
}

.pv-net .pv-ledger {
  padding-top: var(--s4);
  border-top: 1px solid var(--night-line-strong);
}

.pv-net .pv-ledger > div + div {
  border-top-color: var(--night-line);
}

.pv-net .pv-ledger dt {
  color: var(--night-ink);
}

.pv-net .pv-ledger dd {
  color: var(--night-body);
}

/* The one loud line, under a heavier rule: the answer the list leads to.
   It stays smaller than the page's name. */
.pv-net-end {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 2px solid var(--night-ink);
}

.pv-none {
  max-width: 22ch;
  color: var(--night-ink);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pv-ports {
  margin-top: var(--s5);
  color: var(--night-body);
}

/* Contact: the address is the last thing on the page, set large enough to
   read and copy at a glance */

.pv-text > * + * {
  margin-top: var(--s4);
}

.pv-mail {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.pv-mail a {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}

.pv-mail a:hover {
  text-decoration-thickness: 3px;
}

/* Printed or saved as a PDF, a policy should read on white paper. Browsers
   drop backgrounds in print, which would leave the night parts' light text
   on white; these parts print in ink instead. */
@media print {
  .pv-hero,
  .pv-net {
    background: none;
  }

  .pv-hero h1,
  .pv-hero .updated,
  .pv-hero .lead,
  .pv-net h2,
  .pv-net strong,
  .pv-intro,
  .pv-net .pv-ledger dt,
  .pv-net .pv-ledger dd,
  .pv-none,
  .pv-ports {
    color: var(--ink);
  }

  .pv-net .pv-ledger,
  .pv-net .pv-ledger > div + div {
    border-top-color: var(--line-strong);
  }

  .pv-net-end {
    border-top-color: var(--ink);
  }
}