/* ===== Legal page — dense reference doc, easier to scan than to read =====
   Inherits about.css scaffolding (topbar, kicker, footer). This file just
   tightens the typographic scale + adds a TL;DR callout style. */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 28px 40px;
}

.legal-header {
  margin-bottom: 36px;
}
.legal-header h1 {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--text-strong);
  margin: 0 0 18px;
}
.legal-header .dek {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 16px;
  max-width: 62ch;
}
.legal-header .dek strong { color: var(--accent); font-weight: 600; }
.legal-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.5px;
  color: var(--text-faint);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

/* TL;DR callout — borrowed magazine-style "in brief" pattern */
.legal-tldr {
  background: rgba(229,188,115,0.05);
  border: 1px solid var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  padding: 22px 26px 24px;
  margin: 0 0 48px;
}
.legal-tldr h2 {
  font-family: var(--serif);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin: 0 0 14px;
  font-weight: 600;
  padding: 0;
  border: 0;
}
.legal-tldr h2::after { display: none; }
.legal-tldr ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-tldr li {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  padding-left: 18px;
  position: relative;
}
.legal-tldr li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  top: 4px;
}
.legal-tldr li strong { color: var(--text-strong); font-weight: 600; }

/* Body section formatting */
.legal-section {
  margin-bottom: 40px;
  scroll-margin-top: 80px;
}
.legal-section h2 {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--text-strong);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.legal-section h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 36px; height: 1.5px;
  background: var(--accent);
}
.legal-section p {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 14px;
}
.legal-section p strong { color: var(--text-strong); font-weight: 600; }
.legal-section p em { color: var(--text-mute); font-style: italic; }
.legal-section code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--bg-elev);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent);
}

.legal-section .point-list li {
  font-size: 15px;
  padding: 8px 0 8px 20px;
}
.legal-section .point-list li strong { color: var(--text-strong); font-weight: 600; }

.legal-address {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  padding: 14px 18px;
  background: var(--bg-elev);
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
  margin: 12px 0 !important;
}
.legal-grievance {
  font-style: italic;
  color: var(--text-mute) !important;
  font-size: 14px !important;
}

@media (max-width: 720px) {
  .legal { padding: 36px 22px 30px; }
  .legal-header h1 { font-size: 30px; }
  .legal-header .dek { font-size: 16px; }
  .legal-tldr { padding: 18px 18px; margin-bottom: 32px; }
  .legal-tldr li { font-size: 14px; }
  .legal-section h2 { font-size: 19px; }
  .legal-section p { font-size: 15px; }
}