/* Privacy page. Shared look in site.css.
   A reading page: the title, a note that this is a concept, then one section per question with its
   heading on the left and the answer on the right (about 65 characters a line). The photo credits
   (#photos) are written by tools/build-credits.mjs. */

.doc { padding: 0 var(--sc-gutter) clamp(4rem, 7vw, 7rem); }
.doc-head { padding-top: clamp(2rem, 6vh, 4rem); }
.doc-head h1 { margin: 0; font-size: clamp(5rem, 11vw, 12rem); }
.doc-intro { margin: 1.25rem 0 0; max-width: 40ch; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); }
.doc-date { margin: 1.25rem 0 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 600; color: var(--sc-ink-soft); }

/* The concept note: on paper, so it reads as an aside, not part of the notice */
.doc-note { max-width: 46rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.25rem 1.5rem; background: var(--paper); color: var(--paper-ink); }
.doc-note p { margin: 0; max-width: 62ch; line-height: 1.6; }   /* under 80 characters a line on any screen */

/* One question per row: heading left, answer right */
.doc-sec { display: grid; grid-template-columns: minmax(12rem, 22rem) minmax(0, 40rem); column-gap: clamp(2rem, 5vw, 6rem); align-items: start; margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: clamp(2rem, 3vw, 2.75rem); box-shadow: 0 -1px 0 var(--sc-hairline); scroll-margin-top: 1.5rem; }
.doc-sec h2 { margin: 0; font-size: clamp(2rem, 2.8vw, 2.8rem); }
.doc-sec p { margin: 0; font-size: 1.1rem; line-height: 1.7; }
.doc-sec p + p, .doc-sec p + .credits { margin-top: 1em; }
.doc-sec a { text-decoration-color: var(--sc-accent); text-underline-offset: 0.18em; }

/* Photo credits: what it shows, then who took it and where it's used */
.credits { display: grid; gap: 0; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.credits li { padding: 0.9rem 0; box-shadow: 0 1px 0 var(--sc-hairline); }
.credits .credit__what { font-size: 1rem; line-height: 1.5; }
.credits .credit__by { margin-top: 0.2rem; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); }
.credits .credit__by a { color: var(--sc-ink); }

/* ---- Phone (640px and narrower): headings above their answers ---- */
@media (max-width: 640px) {
  .doc-head h1 { font-size: clamp(4rem, 19vw, 5.5rem); }
  .doc-intro { font-size: 1.1rem; }
  .doc-sec { grid-template-columns: 1fr; row-gap: 1rem; }
  .doc-sec h2 { font-size: clamp(2rem, 9vw, 2.4rem); }
  .doc-sec p { font-size: 1.05rem; }
}