/* Angler — 80 · privacy. Cream, same as #formats above. One centred column rather than
   the two-column form the sections above use: this section is three short statements
   under a glyph, and there is no second column of content to balance against.
   Type is .dev__h / .dev__p verbatim — this section has no scale of its own. */

/* padding-top 0, not --sec-y: the formats collage above already trails ~96px of its
   own whitespace, so the default padding doubled the page's 120px section rhythm.
   Same compensation trick 15-demo/20-formats use, from the other side. */
.priv { background: var(--paper); padding-block-start: 0; }

/* .wrap does the 960px column; this only centres what sits inside it. */
.priv__wrap { text-align: center; }

/* ---------------------------------------------------------------- the lock */

/* 326px is not a taste number: the plate is a 768px crop drawn at 40 user units, so at
   this height it renders at 384 CSS px — 1:1 in device pixels on a 2x display. Larger
   and the browser upsamples the dither into mush; the vw term gives that up below 1280,
   where a 2x screen still has pixels to spare.
   Width follows height off the cropped viewBox's 28:34. */
.priv__seal {
  --lock-h: clamp(240px, 25.5vw, 326px);
  width: calc(var(--lock-h) * 28 / 34);
  margin-inline: auto;
}

.priv__lock {
  height: var(--lock-h);
  width: 100%;
}

/* The plate drifts inside the silhouette — the marbling is liquid, so it reads as the
   thing behind the glass moving rather than the glyph moving.
   Translate only, no scale: any scale stop resamples the image and gives up the 1:1 the
   whole section is built around. Amplitude is bounded by the plate's bleed past the
   glyph — 3 units top and bottom, 6 either side — so 1.8 never uncovers an edge.
   Three stops rather than two, so the loop doesn't read as a ping-pong. */
.priv__plate {
  /* No image-rendering: pixelated. At this crop the plate is already 1:1 on a 2x
     display, so nearest-neighbour buys nothing there, and on a 1x screen it turns the
     2:1 downsample into aliasing instead of letting the filter do its job. */
  transform-box: fill-box;
  animation: priv-drift 28s var(--ease-house) infinite;
}

@keyframes priv-drift {
  0%   { transform: translate(0, 0); }
  34%  { transform: translate(-1.8px, 1.1px); }
  67%  { transform: translate(1.4px, -1.6px); }
  100% { transform: translate(0, 0); }
}

/* ---------------------------------------------------------------- the copy */

/* .dev__h verbatim, on its own margin: the lock above it is a 326px object, and the
   22px that separates a headline from an eyebrow is not the gap that reads under one. */
.priv__h {
  margin-top: clamp(24px, 3vw, 40px);
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.85rem, 2.95vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.priv__h span { display: block; }
.priv__h--ink  { color: var(--ink); }
.priv__h--soft { color: var(--muted); }

/* The BLOCK is centred, the rows are not: three ragged-both-sides lines each opening
   with a disc would put the discs on three different x positions. max-content sizes the
   block to the longest statement so the whole set can sit left-aligned inside a centred
   box; max-width keeps it wrapping instead of overflowing when the column is narrower
   than that line. */
.priv__list {
  list-style: none;
  margin: 26px auto 0;
  display: grid;
  gap: 14px;
  width: max-content;
  max-width: 100%;
  text-align: left;
}

/* 16px / 1.62 / --ink-soft is .dev__p and .fmt__p — the site's body copy. */
.priv__list li {
  position: relative;
  padding-left: 34px;
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* Filled disc with a check in it, as a pseudo-element rather than an inline SVG per
   item: a glyph and a border-radius do the whole job. top is in em so the disc tracks
   the first line's cap height if the type ever resizes. */
.priv__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--lake);
  color: var(--paper);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  /* transform back to none explicitly, not just animation: none — pausing mid-loop
     would freeze the plate on whatever offset it happened to be holding. */
  .priv__plate { animation: none; transform: none; }
}