/* The Terms of Service and Privacy Policy (terms/, privacy/): the home page's fonts, wash, header and footer around a
   white sheet that's easy to read. Copied from site.css rather than linked, so the home page can change without moving
   these pages. Night follows the device's dark setting, as the home page's does; #look=night and #look=day override it. */

@font-face {
  font-family: "Bricolage Display";
  src: url("assets/fonts/bricolage-display-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Text";
  src: url("assets/fonts/bricolage-text-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #0A0A0A;
  --ink-2: #4B4B57;
  --rim: #FFFBF8;
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --focus: var(--ink);
  --page: #FFE2EC;
  --page-bg: radial-gradient(70% 45% at 50% 0%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(160deg, #FFE6D6 0%, #FFDDEB 46%, #E8DEFF 100%);
  --shape: rgba(255, 255, 255, .34);
  --shape-2: rgba(255, 255, 255, .28);
  --lift: 0 1px 2px rgba(60, 20, 80, .06), 0 30px 56px -30px rgba(120, 40, 150, .42);
  --mark-shadow: drop-shadow(0 6px 10px rgba(120, 40, 150, .22));
  --draft-bg: var(--ink);
  --draft-fg: var(--rim);
  --display: "Bricolage Display", "Segoe UI", system-ui, sans-serif;
  --display-text: "Bricolage Text", "Segoe UI", system-ui, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 20px;
  /* The sheet the text is on, and the contents beside it */
  --sheet: #FFFFFF;
  --sheet-fg: var(--ink);
  --sheet-fg-2: #33333D;
  --sheet-box: #F4F4F8;
  --link: #6D28D9;
  --dot: #C2257F;
  --nav-bg: rgba(255, 255, 255, .62);
  --nav-edge: rgba(255, 255, 255, .7);
  --nav-hover: #FFFFFF;
  /* Placeholders: facts to fill in before the pages are final */
  --ph-bg: #FFF0B3;
  --ph-fg: #4D3800;
  --ph-line: #D9A400;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--page); scroll-behavior: smooth; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--page-bg); pointer-events: none; }
.sh { position: absolute; display: block; }
.sh-sq { width: 150px; height: 150px; top: 9%; right: -62px; border: 28px solid var(--shape); border-radius: 46px; rotate: 14deg; }
.sh-dot { width: 120px; height: 120px; bottom: 22%; left: -56px; border-radius: 50%; background: var(--shape-2); }
.sh-pill { width: 130px; height: 44px; top: 44%; right: -50px; border-radius: 999px; background: var(--shape-2); rotate: -12deg; }

/* Header: the sticker and the wordmark, home */
.top { position: relative; z-index: 3; padding: calc(env(safe-area-inset-top) + 16px) var(--gutter) 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin: -6px; padding: 6px; border-radius: 14px; color: var(--fg); text-decoration: none; }
.mark { width: 38px; height: auto; rotate: -8deg; filter: var(--mark-shadow); }
.word { width: 84px; height: auto; }

/* Phones: the title, the folded contents, then the sheet. Wide windows put the contents beside the sheet */
.legal {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 26px var(--gutter) 56px;
}

.head { display: grid; justify-items: start; gap: 12px; padding: 0 2px 6px; }
.head h1 { margin: 0; font: 800 clamp(40px, 12vw, 76px)/.95 var(--display); letter-spacing: -.045em; color: var(--fg); text-wrap: balance; }
.meta { margin: 0; font: 600 14px/1.4 var(--sans); color: var(--fg-2); }
.lede { margin: 0; max-width: 32em; font: 700 clamp(17px, 4.6vw, 21px)/1.35 var(--display-text); letter-spacing: -.01em; color: var(--fg-2); text-wrap: pretty; }

/* Draft label: delete it with <p class="draft"> and the robots meta once the pages are final */
.draft {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--draft-bg);
  color: var(--draft-fg);
  font: 800 12px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.draft::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FDA454; }

/* Placeholders: search the pages for class="ph" */
.ph {
  padding: 0 .3em;
  border-radius: 5px;
  background: var(--ph-bg);
  color: var(--ph-fg);
  box-shadow: inset 0 -2px 0 var(--ph-line);
  font-weight: 650;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Contents */
.toc { align-self: start; border-radius: 22px; background: var(--nav-bg); box-shadow: inset 0 0 0 1px var(--nav-edge); }
.toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 22px;
  font: 700 16px/1.2 var(--display-text);
  letter-spacing: -.01em;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; rotate: 45deg; translate: 0 -3px; transition: rotate .2s ease, translate .2s ease; }
.toc[open] summary::after { rotate: 225deg; translate: 0 2px; }
.toc ol { margin: 0; padding: 0 8px 10px; list-style: none; }
.toc a { display: flex; gap: 8px; padding: 7px 10px; border-radius: 12px; font: 600 14.5px/1.3 var(--sans); color: var(--fg-2); text-decoration: none; }
.toc a:hover { background: var(--nav-hover); color: var(--fg); }
.toc .n { flex: none; min-width: 1.5em; font-variant-numeric: tabular-nums; }

/* The sheet */
.sheet {
  min-width: 0;
  padding: 26px 20px 34px;
  border-radius: 26px;
  background: var(--sheet);
  color: var(--sheet-fg-2);
  box-shadow: var(--lift);
  font: 400 16px/1.62 var(--sans);
  overflow-wrap: break-word;
}
.sheet > :first-child { margin-top: 0; }
.sheet section { scroll-margin-top: 20px; }
.sheet h2 { margin: 2.1em 0 .55em; font: 800 clamp(22px, 5.4vw, 27px)/1.15 var(--display); letter-spacing: -.025em; color: var(--sheet-fg); text-wrap: balance; }
.sheet h2 .n { margin-right: .12em; color: var(--dot); }
.sheet h3 { margin: 1.5em 0 .45em; font: 700 18px/1.3 var(--display-text); letter-spacing: -.01em; color: var(--sheet-fg); }
.sheet p, .sheet ul, .sheet dl, .sheet address { margin: 0 0 .85em; }
.sheet ul { padding-left: 1.25em; }
.sheet li { padding-left: .15em; }
.sheet li + li { margin-top: .45em; }
.sheet li::marker { color: var(--dot); }
.sheet strong, .sheet dt { color: var(--sheet-fg); font-weight: 700; }
.sheet dd { margin: .1em 0 .8em; }
.sheet address { font-style: normal; }
.sheet a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sheet a:hover { text-decoration-thickness: 2px; }

/* In short: the summary on top */
.short { margin-bottom: 6px; padding: 18px 18px 8px; border-radius: 20px; background: var(--sheet-box); }
.short h2 { margin-top: 0; font-size: 21px; }
.note { font-size: .9em; }

/* Footer: as on the home page */
.foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 22px;
  padding: 10px var(--gutter) calc(env(safe-area-inset-bottom) + 14px);
  font: 600 13px/1.3 var(--sans);
  color: var(--fg-2);
}
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; }
.foot a { display: inline-block; padding: 7px 2px; border-radius: 6px; text-decoration: none; }
.foot a:hover, .foot a[aria-current="page"] { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.foot p { margin: 0; }

/* Narrow phones */
@media (max-width: 359px) {
  :root { --gutter: 14px; }
  .sheet { padding: 22px 16px 30px; border-radius: 22px; }
  .short { padding: 16px 14px 6px; }
}

@media (min-width: 600px) {
  .legal { gap: 22px; padding-top: 40px; }
  .sheet { padding: 44px 48px 52px; border-radius: 34px; font-size: 17px; }
  .short { padding: 22px 26px 10px; }
}

@media (min-width: 960px) {
  :root { --gutter: 36px; }
  .top { padding-top: 26px; }
  .brand { gap: 12px; }
  .mark { width: 50px; }
  .word { width: 112px; }
  .sh-sq { width: 240px; height: 240px; top: 10%; right: 8%; border-width: 44px; border-radius: 70px; }
  .sh-dot { width: 200px; height: 200px; bottom: 12%; left: 9%; }
  .sh-pill { width: 220px; height: 72px; top: 22%; left: 6%; right: auto; }
  .foot { justify-content: space-between; padding: 12px var(--gutter) 20px; }
}

/* Wide windows: the contents stay beside the sheet as it scrolls */
@media (min-width: 1100px) {
  .legal {
    grid-template-columns: 236px minmax(0, 780px);
    grid-template-areas: ". head" "toc sheet";
    justify-content: center;
    gap: 30px 44px;
    max-width: none;
    padding-top: 48px;
  }
  .head { grid-area: head; }
  .toc { grid-area: toc; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; }
  .sheet { grid-area: sheet; }
}

/* Big screens: the header and footer keep to the home page's width, the text grows a little */
@media (min-width: 1800px) {
  .legal { grid-template-columns: 260px minmax(0, 860px); column-gap: 56px; }
  .sheet { padding: 56px 64px 64px; font-size: 18px; }
  .toc a { font-size: 15.5px; }
}
@media (min-width: 1800px) and (min-height: 1000px) {
  .top, .foot { width: 100%; max-width: 1640px; margin-inline: auto; }
  .mark { width: 60px; }
  .word { width: 136px; }
  .foot { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Night: the app icon's black, the sticker's cream, a dark sheet. It follows the device's dark setting, and #look=night or
   #look=day overrides it: the two blocks below are the same night, keep them alike */
@media (prefers-color-scheme: dark) {
  :root:not([data-look="day"]) {
    color-scheme: dark;
    --fg: #FFFBF8;
    --fg-2: rgba(255, 251, 248, .78);
    --focus: #FFFBF8;
    --page: #0A0A0A;
    --page-bg: radial-gradient(55% 50% at 12% 8%, rgba(247, 146, 58, .2), transparent 70%), radial-gradient(50% 55% at 88% 92%, rgba(138, 55, 245, .32), transparent 70%), radial-gradient(40% 40% at 78% 18%, rgba(227, 66, 159, .16), transparent 70%), #0A0A0A;
    --shape: rgba(255, 251, 248, .06);
    --shape-2: rgba(255, 251, 248, .045);
    --lift: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -28px rgba(0, 0, 0, .9);
    --mark-shadow: none;
    --draft-bg: var(--rim);
    --draft-fg: var(--ink);
    --sheet: #151518;
    --sheet-fg: #FFFBF8;
    --sheet-fg-2: rgba(255, 251, 248, .84);
    --sheet-box: #202026;
    --link: #C6A8FF;
    --dot: #FF7AC1;
    --nav-bg: rgba(255, 251, 248, .06);
    --nav-edge: rgba(255, 251, 248, .1);
    --nav-hover: rgba(255, 251, 248, .1);
    --ph-bg: #4A3A06;
    --ph-fg: #FFE7A0;
    --ph-line: #D9A400;
  }
}
[data-look="night"] {
  color-scheme: dark;
  --fg: #FFFBF8;
  --fg-2: rgba(255, 251, 248, .78);
  --focus: #FFFBF8;
  --page: #0A0A0A;
  --page-bg: radial-gradient(55% 50% at 12% 8%, rgba(247, 146, 58, .2), transparent 70%), radial-gradient(50% 55% at 88% 92%, rgba(138, 55, 245, .32), transparent 70%), radial-gradient(40% 40% at 78% 18%, rgba(227, 66, 159, .16), transparent 70%), #0A0A0A;
  --shape: rgba(255, 251, 248, .06);
  --shape-2: rgba(255, 251, 248, .045);
  --lift: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -28px rgba(0, 0, 0, .9);
  --mark-shadow: none;
  --draft-bg: var(--rim);
  --draft-fg: var(--ink);
  --sheet: #151518;
  --sheet-fg: #FFFBF8;
  --sheet-fg-2: rgba(255, 251, 248, .84);
  --sheet-box: #202026;
  --link: #C6A8FF;
  --dot: #FF7AC1;
  --nav-bg: rgba(255, 251, 248, .06);
  --nav-edge: rgba(255, 251, 248, .1);
  --nav-hover: rgba(255, 251, 248, .1);
  --ph-bg: #4A3A06;
  --ph-fg: #FFE7A0;
  --ph-line: #D9A400;
}

@media print {
  .bg, .top, .toc, .foot { display: none; }
  html, body { background: #FFFFFF; }
  .legal { display: block; max-width: none; padding: 0; }
  .head { margin-bottom: 18px; }
  .sheet { padding: 0; border-radius: 0; box-shadow: none; font-size: 11pt; }
  .sheet a { color: inherit; }
  .sheet h2, .sheet h3 { break-after: avoid; }
}