/* ============================================================================
   Long-form reading — the shared body of /blog/ and /legal/*.

   One measure, one scale, one set of rules for a paragraph. The blog hub and
   the four legal documents are the same act (text you read top to bottom) in
   two costumes, and giving each its own type scale is how a site ends up with
   two different-looking paragraphs a click apart.

   The chrome is not touched here — main.css owns the card, the topbar and the
   headline (`.pmast`). This file starts under the hairline.
   ========================================================================== */

.pdoc {
  max-width: 74ch;
  padding: 0 0 clamp(28px, 3.4vw, 52px);
  color: var(--ink-2);
  font-size: 0.985rem;
  line-height: 1.68;
  letter-spacing: -0.009em;
  text-wrap: pretty;
}

.pdoc > :first-child { margin-top: 0; }

.pdoc h2 {
  margin: clamp(30px, 3.4vw, 46px) 0 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  font-weight: 660;
  letter-spacing: -0.028em;
  line-height: 1.24;
}

.pdoc h3 {
  margin: clamp(22px, 2.4vw, 30px) 0 8px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -0.022em;
  line-height: 1.3;
}

.pdoc p { margin: 0 0 16px; }
.pdoc ul, .pdoc ol { margin: 0 0 18px; padding-left: 1.15em; }
.pdoc li { margin-bottom: 8px; }
.pdoc strong { color: var(--ink); font-weight: 620; }

.pdoc a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.pdoc a:hover { text-decoration-color: var(--ink); }

/* A date line, not a heading: it sits above the first section and reads as
   metadata. */
.stamp {
  margin: 0 0 clamp(22px, 2.4vw, 32px);
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 560;
  letter-spacing: -0.005em;
}

/* The one raised surface in a document: a white card on the canvas, hairline,
   no shadow and no hue. Used for the things a reader must not skim past.

   NOT `.callout`. That name is taken by the homepage eyebrow — mono, uppercase,
   `white-space: nowrap` — and it leaked into the blog's medical-advice note as
   a single unwrapping line of capitals. Two different things may not share a
   class name just because they are both "a callout". */
.pnote {
  margin: clamp(22px, 2.6vw, 32px) 0;
  padding: 17px 19px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: clamp(14px, 1.2vw, 18px);
}

.pnote p:last-child { margin-bottom: 0; }
.pnote p { font-size: 0.94rem; }

/* ---- tables --------------------------------------------------------------
   Two of them, both in the privacy policy, both a three-column register of
   "what / why / on what basis". A register is read across a row, so the row is
   the unit that gets the hairline; vertical rules would cut it into three.
   The whole thing scrolls sideways on its own rather than squeezing the
   columns to nothing on a phone. */

.pdoc__table {
  margin: 0 0 20px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 14, 13, 0.22) transparent;
}

/* Same edge cue as the category rails: on a phone the register is wider than
   the column and the third column was simply cut off at the border, which
   reads as a broken table rather than a scrollable one. The scrollbar alone
   does not carry it — it is an overlay bar that only appears mid-gesture. */
/* 600, not 1024. The table's own `min-width` is 34rem = 544px and the wrapper
   is the viewport less ~42px of gutters, so it only overflows below ~586px.
   Between 587 and 1024 nothing scrolled and the fade still ran: at 768 it cut
   the "Legal basis" column mid-word on every row of /legal/privacy.html — a cue
   for a gesture that had nothing to move. */
@media (max-width: 600px) {
  .pdoc__table {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent calc(100% - 4px));
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent calc(100% - 4px));
  }
}

.pdoc table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.55;
}

.pdoc th {
  padding: 0 18px 9px 0;
  border-bottom: 1px solid var(--ink-3);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 620;
  letter-spacing: -0.005em;
  text-align: left;
  vertical-align: bottom;
}

.pdoc td {
  padding: 12px 18px 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: top;
}

.pdoc th:last-child, .pdoc td:last-child { padding-right: 0; }
.pdoc tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 1024px) {
  .pdoc { max-width: none; }
}

/* The one paragraph that is allowed to be bigger than the rest: it says what
   the document is for, and it is read by people who will read nothing else. */
.plede {
  margin: 0 0 clamp(22px, 2.4vw, 30px);
  max-width: 62ch;
  color: var(--ink);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  font-weight: 520;
  letter-spacing: -0.019em;
  line-height: 1.5;
}