/* Privacy & analytics: a footer link and a dialog in the portfolio's own type and palette.
   The dialog keeps the portfolio styling on the prototypes too, since it is the site's notice. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/dm-serif-display-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/dm-mono-400-latin.woff2") format("woff2"); }

/* the link borrows whatever footer it sits in */
.privacy-link {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color .2s;
}
.privacy-link:hover,
.privacy-link:focus-visible { text-decoration-color: currentColor; }
footer:not(.contact) .privacy-link { text-underline-offset: 3px; }

.privacy-dialog {
  --pd-ink: #15171c;
  --pd-body: #3a3c41;
  --pd-muted: #5d5f63;
  --pd-paper: #f5f3ef;
  --pd-rule: #d9d6cf;
  background: var(--pd-paper);
  border: 0;
  border-radius: 4px;
  box-shadow: 0 24px 70px rgba(11, 20, 38, .35);
  color: var(--pd-ink);
  font-family: "DM Sans", system-ui, sans-serif;
  margin: auto;
  max-width: 540px;
  padding: 0;
  width: calc(100% - 32px);
}
.privacy-dialog::backdrop { background: rgba(11, 20, 38, .55); }
.privacy-dialog-inner { padding: 30px 32px 24px; }
.privacy-dialog-head { align-items: baseline; display: flex; gap: 20px; justify-content: space-between; }
.privacy-dialog h2 {
  color: var(--pd-ink);
  font: 400 32px/1.05 "DM Serif Display", Georgia, serif;
  letter-spacing: -.3px;
  margin: 0;
}
.privacy-dialog p {
  color: var(--pd-body);
  font: 400 15px/1.55 "DM Sans", system-ui, sans-serif;
  margin: 14px 0 0;
}
.privacy-dialog-head + p { margin-top: 18px; }
.privacy-dialog code {
  background: none;
  color: var(--pd-ink);
  font: 400 13px/1 "DM Mono", ui-monospace, monospace;
  padding: 0;
}
.privacy-dialog button {
  appearance: none;
  background: none;
  border: 0;
  color: var(--pd-ink);
  cursor: pointer;
  font: 400 15px/1.3 "DM Sans", system-ui, sans-serif;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--pd-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color .2s;
}
.privacy-dialog button:hover,
.privacy-dialog button:focus-visible { text-decoration-color: currentColor; }
.privacy-dialog button[hidden], .privacy-dialog p[hidden] { display: none; }
.privacy-dialog-close { color: var(--pd-muted) !important; font-size: 14px !important; flex: none; }
.privacy-dialog-foot { border-top: 1px solid var(--pd-rule); margin-top: 22px; padding-top: 16px; }
.privacy-dialog-row { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }
.privacy-dialog .privacy-dialog-status { color: var(--pd-ink); font-weight: 500; margin: 0; }
.privacy-dialog .privacy-dialog-note { color: var(--pd-muted); font-size: 13px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .privacy-link, .privacy-dialog button { transition: none; }
}
@media (max-width: 560px) {
  .privacy-dialog-inner { padding: 24px 20px 20px; }
  .privacy-dialog h2 { font-size: 27px; }
  .privacy-dialog p { font-size: 14.5px; }
}