/* Legal pages — /legals/privacy/, /legals/terms/, /legals/licensing-terms/.
   Long-form rich text. Values verbatim from _spec/privacy|terms|licensing-*.json.
   Title: TWK Issey uppercase w/ gradient text fill. Body: ". Book" 16/24 at 0.8 opacity. */

/* ---------- Page wrapper ---------- */
.legal {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 240px 24px 160px;
  overflow: hidden;
}
.legal-article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  width: 700px;
  max-width: 100%;
}

/* ---------- Title ---------- */
.legal-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 600px;
  max-width: 100%;
}
.legal-title {
  max-width: 600px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 70px;            /* 96px >=1520, 56px tablet, 48px mobile */
  line-height: 0.96em;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--title);
  white-space: pre-wrap;
}
/* Gradient text fill (verbatim from the original: 124deg light -> muted).
   Padding/negative-margin trick keeps glyph edges inside the clip area. */
.legal-title span {
  display: inline-block;
  background-image: linear-gradient(124deg, rgb(247, 247, 247) 0%, rgb(143, 143, 143) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0.17em;
  margin: -0.17em;
}
/* light: the near-white→grey title fill is invisible on the white page —
   mirror to near-black→mid-grey (same directional sheen). */
[data-theme="light"] .legal-title span {
  background-image: linear-gradient(124deg, rgb(24, 24, 24) 0%, rgb(120, 120, 120) 100%);
}
@media (min-width: 1520px) {
  .legal-title { font-size: 96px; }
}

/* ---------- Rich text body ---------- */
.legal-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  opacity: 0.8;
  font-family: var(--font-book);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--title);
  word-break: break-word;
}
.legal-body p,
.legal-body h2,
.legal-body h3,
.legal-body li { white-space: pre-wrap; }

/* Block rhythm: each block carries its own top spacing (Framer paragraph spacing) */
.legal-body p { margin: 20px 0 0; }
.legal-body h2 {
  font-family: var(--font-medium);
  font-weight: 400;
  font-size: 40px;
  line-height: 42px;
  letter-spacing: -2.4px;
  color: var(--title);
  margin: 32px 0 0;
}
.legal-body h3 {
  font-family: var(--font-medium);
  font-weight: 400;
  font-size: 48px;
  line-height: 50.4px;
  letter-spacing: -1.92px;
  color: var(--title);
  margin: 40px 0 0;
}
.legal-body > :first-child { margin-top: 0; }

/* Inline styles */
.legal-body strong { font-family: var(--font-demi); font-weight: 400; }
.legal-body code {
  font-family: var(--font-mono);
  color: rgb(51, 51, 51);
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 0.1em 0.2em;
}

/* Lists — bullet drawn as ::before, like the original (list-style:none) */
.legal-body ul { list-style: none; margin: 32px 0 0; }
.legal-body ul ul { margin: 0; }
.legal-body li { position: relative; padding-left: 1.156em; }
.legal-body li::before { content: "\2022"; position: absolute; left: 0; }
.legal-body li p { margin: 0; }

/* Blockquote — Inter italic, muted, 2px light rule on the left */
.legal-body blockquote {
  position: relative;
  margin: 20px 0 0;
  padding: 0 0 0 22px;
}
.legal-body blockquote::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #ddd;
  border-radius: 1px;
}
/* light: the #ddd rule vanishes on white — darken to a visible hairline */
[data-theme="light"] .legal-body blockquote::before { background-color: var(--outline); }
.legal-body blockquote p {
  margin: 0;
  font-family: var(--font-inter);
  font-style: italic;
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: normal;
  color: rgb(153, 153, 153);
}

/* ---------- Breakpoints ---------- */
@media (max-width: 1199.98px) {
  .legal-title { font-size: 56px; }
}
@media (max-width: 809.98px) {
  .legal { padding: 120px 24px 160px; }
  .legal-article { gap: 40px; }
  .legal-title { font-size: 48px; max-width: 300px; text-wrap: balance; }
}