/* Legal pages (Privacy, Terms, Accessibility, Consumer Health Data), styled to match the
   Health Journal. Lives inside .journal, so journal.css tokens (--fh, --fb, --ink, --brown,
   --border, --maxw) and the serif heading rules are already in scope. This just sets the
   single-column measure, spacing, and the element styles for the legal copy, so we don't have
   to rewrite each page's markup. */

.legal-doc{
  max-width:var(--maxw);
  margin:0 auto;
  padding:56px 24px 24px;
  font-family:var(--fb);
  font-size:17px;
  line-height:1.72;
  color:var(--ink);
}

/* Page title (h3.main-heading on the privacy/terms/CHD pages, or h1 on accessibility) */
.legal-doc .main-heading,
.legal-doc h1{
  font-family:var(--fh);
  font-weight:400;
  font-size:clamp(34px,6vw,50px);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 18px;
  text-wrap:balance;
}

/* Section headings */
.legal-doc h2,
.legal-doc h3{
  font-family:var(--fh);
  font-weight:500;
  font-size:26px;
  line-height:1.18;
  margin:40px 0 12px;
  text-wrap:balance;
}
.legal-doc h4{
  font-family:var(--fh);
  font-weight:500;
  font-size:21px;
  line-height:1.2;
  margin:34px 0 10px;
  color:var(--ink);
}

.legal-doc p{margin:0 0 16px;}
.legal-doc ul,
.legal-doc ol{margin:0 0 18px;padding-left:22px;}
.legal-doc li{margin:0 0 9px;}

.legal-doc a{
  color:var(--brown);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.legal-doc a:hover{color:var(--ink);}

.legal-doc strong,.legal-doc b{font-weight:600;}
.legal-doc em{font-family:var(--fi);font-style:italic;font-weight:300;color:var(--brown);}
.legal-doc .underline{text-decoration:underline;text-underline-offset:2px;}

/* The intro / effective-date line under the title reads as an editorial dek */
.legal-doc .title > p{
  font-family:var(--fh);
  font-weight:300;
  font-size:20px;
  line-height:1.55;
  color:var(--brown);
}
.legal-doc .title > p:not(:first-of-type){font-family:var(--fb);font-size:17px;color:var(--ink);}

/* Neutralize the legacy privacy/letter wrappers so their old spacing/columns don't fight the
   single-column editorial measure. */
.legal-doc .privacy-wrapper,
.legal-doc .section-main,
.legal-doc .block,
.legal-doc .title,
.legal-doc .letter-container{
  max-width:none;
  width:auto;
  margin:0;
  padding:0;
  background:none;
  border:0;
}
.legal-doc .block{margin-top:0;}
.legal-doc .block + .block{margin-top:4px;}

@media (max-width:640px){
  .legal-doc{padding:36px 20px 16px;}
}