/* Privacy · the frosted-glass plate, then an open ledger on the paper: each question as a margin head,
   the answer in the serif column, hairlines between. Calm, no imagery in the text. */

body[data-page="privacy"] {
  --hero: url("../img/photos/hero-privacy.jpg");
  --hero-pos: 50% 45%;
  --hero-blend: normal;
}

/* v7.css now sets the gutter and the hero section's padding */
body[data-page="privacy"] .hero {
  min-height: clamp(400px, 56vh, 560px);
  background-image:
    linear-gradient(90deg, rgba(11, 19, 34, .9) 0%, rgba(11, 19, 34, .7) 40%, rgba(11, 19, 34, .28) 100%),
    linear-gradient(0deg, rgba(11, 19, 34, .55), rgba(11, 19, 34, 0) 50%),
    var(--hero);
}

/* the ledger */
body[data-page="privacy"] .poster > section.prose {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 0;
  align-items: start;
  max-width: none;
  padding-top: clamp(3.2rem, 6vw, 5rem);
  padding-bottom: clamp(.6rem, 1.6vw, 1.4rem);   /* the footer's own margin makes the gap */
}
body[data-page="privacy"] .prose > h2 {
  grid-column: 1;
  margin: 0; padding: 1.7rem 3rem 2.6rem 0;
  border-top: 1px solid var(--line);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.06; letter-spacing: -.03em;
  color: var(--fg);
}
body[data-page="privacy"] .prose > p {
  grid-column: 2;
  margin: 0; padding: 1.85rem clamp(0rem, 5vw, 5rem) 2.6rem 0;
  border-top: 1px solid var(--line);
  max-width: none;
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.66; color: #283246;
}
/* the first question opens on Ink's navy rule, with a red tab at its head */
body[data-page="privacy"] .prose > h2:first-child,
body[data-page="privacy"] .prose > h2:first-child + p { border-top: 2px solid var(--fg) }
body[data-page="privacy"] .poster > section.prose { position: relative }
body[data-page="privacy"] .poster > section.prose::before {
  content: ""; position: absolute; left: 0; top: calc(clamp(3.2rem, 6vw, 5rem) - 1px);
  width: 4.5rem; height: 4px; background: var(--red);
}
body[data-page="privacy"] .prose > p:last-child { padding-bottom: 0 }
body[data-page="privacy"] .prose > h2:last-of-type { padding-bottom: 0 }

@media (max-width: 860px) {
  body[data-page="privacy"] .poster > section.prose { grid-template-columns: minmax(0, 1fr) }
  body[data-page="privacy"] .prose > h2,
  body[data-page="privacy"] .prose > p { grid-column: 1 }
  body[data-page="privacy"] .prose > h2 { padding: 1.5rem 0 .7rem; font-size: 1.5rem }
  body[data-page="privacy"] .prose > p { padding: 0 0 2.2rem; border-top: 0; max-width: 44rem }
  body[data-page="privacy"] .prose > h2:first-child + p { border-top: 0 }
  body[data-page="privacy"] .prose > h2:last-of-type { padding-bottom: .7rem }
}
@media (max-width: 640px) {
  body[data-page="privacy"] .hero { min-height: 420px }
  body[data-page="privacy"] .prose > h2 { font-size: 1.35rem }
  body[data-page="privacy"] .prose > p { font-size: 1.08rem; line-height: 1.64; padding-bottom: 1.9rem }
}

/* narrow screens: the text spans the plate, so the veil runs bottom to top */
@media (max-width: 860px) {
  body[data-page="privacy"] .hero {
    background-image:
      linear-gradient(0deg, rgba(11, 19, 34, .9) 0%, rgba(11, 19, 34, .7) 55%, rgba(11, 19, 34, .3) 100%),
      linear-gradient(0deg, rgba(11, 19, 34, 0), rgba(11, 19, 34, 0)),
      var(--hero);
  }
}