@import url('site.css');

.legal-page { min-height: 100vh; background: var(--bg-0); }
.legal-header { padding: 24px 0; border-bottom: 1px solid var(--card-line); }
.legal-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.legal-back { color: var(--muted); font-size: 13px; }
.legal-back:hover { color: var(--ink); }
.legal-main { padding: clamp(56px, 9vw, 110px) 0 100px; }
.legal-layout { display: grid; grid-template-columns: 190px minmax(0, 720px); gap: clamp(36px, 8vw, 110px); align-items: start; }
.legal-kicker { margin: 0 0 14px; color: var(--gold); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.legal-title { margin: 0; font-family: var(--serif); font-size: clamp(36px, 5vw, 62px); font-weight: 400; line-height: 1.15; }
.legal-updated { margin: 16px 0 0; color: var(--faint); font-size: 12px; }
.legal-content { color: var(--muted); font-size: 15px; line-height: 2; }
.legal-content h2 { margin: 0 0 12px; color: var(--ink); font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.4; }
.legal-content h2:not(:first-child) { margin-top: 42px; }
.legal-content p { margin: 0 0 18px; }
.legal-content ul { margin: 0 0 22px; padding-left: 22px; }
.legal-content li { margin: 4px 0; }
.legal-content strong { color: var(--ink); font-weight: 500; }
.legal-content a, .legal-note a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--card-line); transition: color .2s, text-decoration-color .2s; }
.legal-content a { color: var(--ink); }
.legal-content a:hover, .legal-note a:hover { color: var(--gold); text-decoration-color: var(--gold); }
.legal-note { margin-top: 44px; padding: 18px 20px; border: 1px solid var(--card-line); border-radius: var(--radius-sm); background: rgba(255,255,255,.035); color: var(--faint); font-size: 13px; line-height: 1.8; }
.legal-footer { padding: 24px 0 40px; border-top: 1px solid var(--card-line); color: var(--faint); font-size: 12px; }
@media (max-width: 700px) {
  .legal-header .wrap { align-items: flex-start; }
  .legal-layout { display: block; }
  .legal-aside { margin-bottom: 44px; }
  .legal-title { font-size: 40px; }
  .legal-content { font-size: 14px; line-height: 1.9; }
}