/* Eight Fifteen Labs — the studio's privacy and terms pages. Loaded after home.css, so the navy stage, the clock-mark
   header, the type and the footer are the home page's own. The document sits on a cream card with the phone's offset
   block behind it, and its text swaps the playful Fredoka for a reading serif, as on the games' legal pages. */

:root {
  --legal-font: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --ink: #23254a;      /* the stage navy, as text on the card */
  --link: #3a3f9e;
  --rule: rgba(35, 37, 74, .14);
}

/* The header's mark and name lead back home. */
a.brand { width: fit-content; text-decoration: none; }
.site-footer a[aria-current="page"] { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

.legal {
  isolation: isolate; /* keeps the card's offset block above the stage */
  justify-content: flex-start;
  width: 100%; max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 8vw, 96px);
}

/* ---------------------------------------------------------------- title */
.doc-head { padding-block: clamp(36px, 6vw, 64px) clamp(28px, 4vw, 44px); text-align: center; }
.doc-head h1 { font: 400 clamp(38px, 4.6vw, 58px)/1.05 "Lilita One", sans-serif; letter-spacing: .5px; }
.doc-head .meta { margin-top: 12px; font-size: 15px; color: var(--text-faint); }

/* ---------------------------------------------------------------- the document: a cream card on the stage */
.doc {
  position: relative;
  width: 100%; max-width: 46rem; margin: 0 auto;
  padding: clamp(24px, 5vw, 52px) clamp(20px, 5vw, 56px);
  background: var(--cream); color: var(--ink);
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(8, 9, 30, .35);
  font: 400 18px/1.65 var(--legal-font);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
.doc::before { content: ""; position: absolute; inset: 0; z-index: -1; translate: 20px 20px; border-radius: inherit; background: var(--shade); }
.doc > :first-child { margin-top: 0; }
.doc > :last-child { margin-bottom: 0; }
.doc p, .doc ul { margin: 0 0 .9em; }
.doc p { text-wrap: pretty; }
.doc ul { padding-left: 1.3em; }
.doc li { margin-bottom: .4em; }
.doc li::marker { color: var(--link); }

.doc h2 {
  margin: 2em 0 .55em; padding-top: 1.1em;
  border-top: 2px solid var(--rule);
  font-size: 1.3em; font-weight: 700; line-height: 1.25;
}

.doc a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; }
.doc a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.doc a:focus-visible { outline-color: var(--link); outline-offset: 2px; border-radius: 3px; }

@media (max-width: 820px) {
  .doc { border-radius: 22px; }
  .doc::before { translate: 10px 10px; }
}