/* Words We Keep — the privacy page (privacy.html, Figma 540:2074). Layout only: type, colour and
   the grid come from tokens.css and app.css. The text is the notes' column (app.css → .n-col) and
   its rhythm in em, so it follows the live type scale at every width. */

/* The site's pages scroll inside their own boxes (app.css locks html and body); this one is a
   plain document, so a phone's toolbars fold away as it is read. */
html.pv-page, html.pv-page body { height: auto; overflow: visible; overscroll-behavior: auto; }
html.pv-page { scrollbar-width: none; } /* no scrollbar, as the notes */
html.pv-page::-webkit-scrollbar { display: none; }

.pv-page body {
  --sym: calc(200 * var(--u)); /* as the menu's symbol (app.css → .menu --menu-sym), each breakpoint */
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--text-size);
  line-height: var(--text-leading);
  letter-spacing: var(--text-tracking);
  font-feature-settings: var(--text-features);
}
.pv-page h1, .pv-page h2 { font: inherit; }

/* The symbol: top left on the margin, fixed while the text scrolls past it (desktop, tablet —
   the text is two columns to its right); a click goes back to the collection. */
.pv-home { position: fixed; z-index: 2; left: var(--m); top: var(--m); width: var(--sym); height: var(--sym); }
.pv-home .sym { width: 100%; height: 100%; }
.pv-home.is-static { background: currentColor; -webkit-mask: url(https://fonts.wordswekeep.org/s/All.svg) center / 100% 100% no-repeat; mask: url(https://fonts.wordswekeep.org/s/All.svg) center / 100% 100% no-repeat; } /* the symbols' files did not load: the still image */

.pv-col {
  margin-left: var(--col3);
  width: 26.667em; /* 400 / 15, as the notes */
  max-width: calc(100vw - var(--col3) - var(--m));
  padding-top: calc(var(--m) + var(--sym)); /* the text starts level with the symbol's foot */
  padding-bottom: 160px;
}
.pv-updated { color: #565656; padding-left: 2em; } /* the form's --placeholder grey (css/form.css); indented as the sections' text (Bill, 2026-10-10) */
.pv-body { margin-top: 4em; display: flex; flex-direction: column; gap: 2em; } /* 60 under the title, 30 between sections (Figma, at 15) */
.pv-body section h2 + .pv-indent { margin-top: 0.5em; } /* a heading to its text: 8 at 15 */
.pv-indent { padding-left: 2em; } /* the notes' indent (app.css → .n-indent--kept) */
.pv-indent > * + * { margin-top: 1em; } /* between paragraphs, as the notes */
.pv-indent ul { list-style: disc; padding-left: 1.1em; }
.pv-sign { margin-top: 4em; }

/* Tablet: the notes' column runs to one column short of the right margin. */
@media (max-width: 1023px) {
  .pv-page body { --sym: clamp(96px, 19.2vw, 160px); }
  .pv-col { width: auto; max-width: none; margin-right: calc(var(--m) + var(--step)); }
}

/* Phone: the text starts on the margin, under the symbol, so the symbol scrolls away with it;
   the text at most 320 wide, as the notes' body. */
@media (max-width: 599px) {
  .pv-page body { --sym: clamp(96px, 18.8vh, 160px); }
  .pv-home { position: absolute; }
  .pv-col { margin: 0 var(--m); padding-top: calc(var(--m) + var(--sym) + 12em); padding-bottom: 120px; } /* the title is under the symbol here, not beside it: 12em below it (Bill, 2026-10-10) */
  .pv-col > * { max-width: 320px; }
}