/* ============================================================
   Clearmatter — Privacy (utility page)
   A quiet legal page: shared header + footer, one narrow
   reading column between them. No motif, no eyebrow, no
   standfirst, no closing CTA. Existing tokens only. The one
   new pattern is the bold run-in that opens each paragraph.
   ============================================================ */
/* Sticky-footer shell: #root (Header + main + Footer) fills the viewport so a
   short page still pins the footer to the bottom of the window. */
#root{display:flex;flex-direction:column;min-height:100vh;}
.legal{background:var(--linen);flex:1 0 auto;}
.legal__sec{padding-block:calc(clamp(128px,15vw,184px)) clamp(96px,14vw,168px);}
/* Span the full header content container: .legal__col fills .wrap (the same
   wrapper the header's nav uses), so H1, date, and body share the header's
   exact left/right margins. Left-aligned, not centered. */
.legal__col{max-width:none;}

/* Title — the site's display serif, sized for a page title rather than a hero:
   calm, one weight down from drama, unceremonious by design. */
.legal__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(44px,6vw,70px);line-height:1.0;letter-spacing:-.014em;
  color:var(--midnight);margin:0;
}
.legal__date{
  margin:clamp(14px,1.8vw,20px) 0 0;
  font-size:14px;letter-spacing:.01em;color:var(--iron);
}

.legal__body{
  display:flex;flex-direction:column;gap:1.35em;
  margin-top:clamp(34px,4.4vw,52px);
}
.legal__body p{
  margin:0;color:var(--slate);
  font-size:clamp(16.5px,1.5vw,18px);line-height:1.72;text-wrap:pretty;
}
/* Bold run-in: the lead-in ("The contact form.", "Scheduling.", ...) opens the
   paragraph inline, not as a separate heading. */
.legal__body strong{font-weight:600;color:var(--midnight);}
/* Inline mail links — forest action color, quiet underline, matches the site. */
.legal__body a{
  color:var(--forest);
  border-bottom:1px solid rgba(45,106,79,.34);
  transition:border-color .3s var(--ease);
}
.legal__body a:hover{border-color:var(--forest);}

@media (max-width:640px){
  .legal__sec{padding-block:clamp(112px,26vw,150px) clamp(56px,12vw,84px);}
  .legal__title{font-size:clamp(40px,12vw,56px);}
  .legal__body p{font-size:16px;line-height:1.7;}
}