.legal {
  padding: clamp(36px, 6vw, 84px) 20px;
  background: #f4f4f3;
  color: #222426;
  font: 1rem/1.65 system-ui, sans-serif;
}
.legal article {
  max-width: 720px;
  margin: auto;
}
.legal .legal-brand {
  margin: 0 0 8px;
  color: #55595d;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.legal h1 {
  margin: 0 0 28px;
  color: inherit;
  font: 700 clamp(2rem, 5vw, 3rem)/1.15 system-ui, sans-serif;
  letter-spacing: -.035em;
}
.legal h2 {
  margin: 26px 0 8px;
  padding-top: 18px;
  border-top: 1px solid #d5d6d6;
  color: inherit;
  font: 650 1.2rem/1.35 system-ui, sans-serif;
}
.legal p { margin: 0 0 10px; }
.legal address { font-style: normal; }
.legal dt { font-weight: 650; margin-top: 12px; }
.legal dd { margin: 2px 0 0; }
.legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
.legal .legal-related {
  border-top: 1px solid #d5d6d6;
  padding-top: 18px;
  margin-top: 28px;
}

.media-permissions {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #d5d6d6;
  background: #fff;
}
.media-permission {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.media-permissions p { margin: 0; }
.media-permissions strong { margin-inline-start: .35em; }
.media-permission button {
  padding: 6px 10px;
  border: 1px solid #55595d;
  border-radius: 4px;
  background: #fff;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.media-permission button:disabled { opacity: .6; cursor: default; }

#twitch-permission[data-allowed] {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e7e8ea;
  color: #53575d;
}
#twitch-permission[data-allowed="true"] {
  background: #d9f4df;
  color: #14632d;
}

.legal {
  background: #dfd9cc;
  color: #27231f;
  font-family: Bricolage, system-ui, sans-serif;
}
.legal article {
  max-width: 820px;
  padding: clamp(20px, 5vw, 48px);
  border: 2px solid #39332d;
  box-shadow: 5px 5px 0 #807669;
  background: #fff5df;
}
.legal .legal-brand {
  display: inline-block;
  padding: 5px 9px;
  background: #39332d;
  color: #fff5df;
}
.legal h1 {
  font-family: Monocraft, monospace;
  font-size: clamp(1.6rem, 5.2vw, 3rem);
  letter-spacing: -.04em;
}
.legal h2 {
  border-color: #c6bba8;
  font-family: Monocraft, monospace;
  font-size: clamp(.95rem, 3vw, 1.15rem);
}
.legal .legal-related { border-color: #c6bba8; }
.media-permissions {
  border: 2px solid #39332d;
  box-shadow: 3px 3px 0 #807669;
  background: #fffcf4;
}
.media-permission button {
  border: 2px solid #39332d;
  border-radius: 0;
  box-shadow: 2px 2px 0 #807669;
  background: #f4e7cb;
}