/* Terms and Privacy: a quiet reading page on the same dawn sky as the home page */
:root {
  --ink: #2b3150;
  --ink-soft: #5d6382;
  --cobalt: #5677d6;
  --rule: rgba(43, 49, 80, .1);
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0; color: var(--ink); font: 400 17px/1.7 "Manrope", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, #e9e3f1 0%, #ddd4ea 40%, #e6d2e4 80%, #efd2de 100%) fixed;
}
a { color: var(--cobalt); text-underline-offset: 3px; }

.top {
  position: sticky; top: 14px; z-index: 5; width: min(760px, 100% - 32px); margin: 14px auto 0;
  display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 7px 0 8px; border-radius: 24px;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.top .logo-mark { width: 44px; height: 44px; }
.top .home { padding: 10px 16px; border-radius: 16px; color: var(--ink); text-decoration: none; font-size: 14.5px; }
.top .home:hover { background: rgba(120, 104, 190, .1); }

.doc { width: min(680px, 100% - 32px); margin: 0 auto; padding: 84px 0 40px; }
.doc h1 { margin: 0; font: 500 clamp(44px, 8vw, 68px)/1.05 "Lora", Georgia, serif; letter-spacing: -.02em; }
.doc .updated { margin: 14px 0 0; color: var(--ink-soft); font-size: 15px; }
.doc .lede { margin: 30px 0 0; font-size: 19px; color: var(--ink-soft); }
.doc h2 { margin: 52px 0 10px; font: 500 26px/1.25 "Lora", Georgia, serif; }
.doc p, .doc ul { margin: 0 0 14px; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: #e4837a; }
.doc strong { font-weight: 400; color: var(--ink); background: linear-gradient(transparent 62%, rgba(246, 183, 210, .55) 62%); }
.doc code { font: 14px ui-monospace, "SF Mono", monospace; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .6); }
.doc .todo { padding: 1px 6px; border-radius: 6px; background: #fff2b3; color: #6b5200; }

/* the same painted sky as the home page: a few clouds drift slowly at the edges, behind everything */
.page-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.page-sky .puff { position: absolute; height: auto; opacity: .8; animation: drift 18s ease-in-out infinite alternate; }
.page-sky .q1 { width: 340px; left: -90px; top: 22vh; }
.page-sky .q2 { width: 440px; right: -150px; top: 58vh; animation-duration: 22s; animation-direction: alternate-reverse; }
.page-sky .q3 { width: 220px; left: 4vw; top: 78vh; opacity: .65; animation-duration: 15s; }
.page-sky .q4 { width: 280px; right: 2vw; top: 9vh; opacity: .6; animation-duration: 20s; animation-direction: alternate-reverse; }
@keyframes drift { from { transform: translateX(-18px); } to { transform: translateX(26px); } }

/* the footer: the name rises behind a bank of painted clouds, as at the end of the home page */
.cloud-foot { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1440 / 520; min-height: 260px; margin-top: 40px; }
.cloud-foot .bank { position: absolute; inset: 0; }
.cloud-foot .bank img { position: absolute; height: auto; }
.cloud-foot .back { opacity: .78; }
.cloud-foot .floor { position: absolute; left: -10%; right: -10%; bottom: 0; height: 26%; background: linear-gradient(180deg, rgba(239,156,196,0) 0%, #ef9cc4 40%); }
.cloud-foot .name-word { position: absolute; left: 0; right: 0; top: 4%; }
/* the sky's printed grain over the scene */
.cloud-foot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); /* fades in, so it has no top edge */
}
@media (prefers-reduced-motion: reduce) { .page-sky .puff { animation: none; } }

@media (max-width: 1100px) { .page-sky .q1, .page-sky .q3 { opacity: .4; } .page-sky .q2, .page-sky .q4 { opacity: .4; } }
@media (max-width: 700px) {
  .page-sky .q1 { width: 200px; left: -110px; } .page-sky .q2 { width: 240px; right: -150px; } .page-sky .q3 { display: none; } .page-sky .q4 { width: 160px; right: -50px; }
  .doc { padding-top: 56px; }
  .top { width: calc(100% - 24px); }
}