.legal-page {
  width: 100%;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--page-gutter) 3rem;
}

.legal-hero { margin: 0 auto 1.25rem; text-align: center; }
.legal-hero .eyebrow {
  color: var(--gold);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.legal-hero h1 { margin: .25rem 0; color: var(--gold-bright); font-family: var(--font-display); }
.legal-hero p { margin: .25rem auto; color: var(--silver); }
.legal-updated { font-size: .78rem; color: var(--silver-dim); }

.legal-summary,
.legal-section {
  border: 1px solid rgba(var(--theme-accent-rgb), .3);
  border-radius: 1rem;
  background: rgba(var(--theme-base-rgb), .88);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .22);
}
.legal-summary { margin-bottom: 1rem; padding: 1rem 1.2rem; }
.legal-summary strong { color: var(--gold-bright); }
.legal-content { display: grid; gap: .85rem; }
.legal-section { padding: clamp(1rem, 2.5vw, 1.4rem); }
.legal-section h2 { margin: 0 0 .55rem; color: var(--gold-bright); font: 700 1.15rem var(--font-display); }
.legal-section h3 { margin: .9rem 0 .35rem; color: var(--gold); font-size: .95rem; }
.legal-section p,
.legal-section li,
.legal-summary { color: var(--silver); line-height: 1.65; }
.legal-section p { margin: .45rem 0; }
.legal-section ul { margin: .45rem 0; padding-left: 1.35rem; }
.legal-section a { color: var(--gold-bright); }

/* The "Who's Behind It" letter reuses the legal shell: same column, same card
   stack. Only the list of commitments and the sign-off need their own look. */
.about-commitments { list-style: none; padding-left: 0; }
.about-commitments li { position: relative; margin: .55rem 0; padding-left: 1.1rem; }
.about-commitments li::before {
  position: absolute;
  left: 0;
  color: var(--gold);
  content: "\2756";
}
.about-commitments strong { color: var(--gold-bright); }
/* Unfinished copy, flagged so it cannot quietly ship as if it were final. */
.about-todo { color: var(--silver-dim); font-style: italic; }
.about-signoff { margin-top: 1.1rem; }
.about-signature { color: var(--gold-bright); font: 700 1.1rem var(--font-display); }
.about-alias { font-size: .85rem; color: var(--silver-dim); }

/* Legal pages stay inside one readable viewport column. Their headings and
   summaries remain visible while only the detailed policy copy scrolls. */
:is(.privacy-policy-page, .terms-of-service-page, .about-me-page) .legal-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100dvh - var(--nav-h));
  margin: 0;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  box-sizing: border-box;
  overflow: hidden;
}
:is(.privacy-policy-page, .terms-of-service-page, .about-me-page) .legal-hero,
:is(.privacy-policy-page, .terms-of-service-page, .about-me-page) .legal-content {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
:is(.privacy-policy-page, .terms-of-service-page, .about-me-page) .legal-hero { flex: 0 0 auto; }
:is(.privacy-policy-page, .terms-of-service-page, .about-me-page) .legal-content {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 .4rem .4rem 0;
  scrollbar-color: var(--gold-deep) rgba(var(--theme-deep-rgb), .55);
  scrollbar-width: thin;
}
:is(.privacy-policy-page, .terms-of-service-page, .about-me-page) .legal-content > .legal-summary { margin-bottom: 0; }
:is(.privacy-policy-page, .terms-of-service-page, .about-me-page) .legal-content::-webkit-scrollbar { width: .6rem; }
:is(.privacy-policy-page, .terms-of-service-page, .about-me-page) .legal-content::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(var(--theme-deep-rgb), .55);
}
:is(.privacy-policy-page, .terms-of-service-page, .about-me-page) .legal-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--gold-deep);
}

@media (max-width: 640px) {
  .legal-page { padding-top: .8rem; }
  :is(.privacy-policy-page, .terms-of-service-page, .about-me-page) .legal-page {
    padding-bottom: .65rem;
  }
  :is(.privacy-policy-page, .terms-of-service-page, .about-me-page) .legal-hero { margin-bottom: .75rem; }
  :is(.privacy-policy-page, .terms-of-service-page, .about-me-page) .legal-summary { padding: .75rem .85rem; font-size: .88rem; }
}