/* Privacy and data-deletion pages (T-259). They load after site.css and use its tokens, buttons, window and footer:
   the navy desk with the title on the left and the text in a white window, as 404.html does. */
/* at least one screen tall, so a short page on a tall screen keeps its footer at the bottom */
body.legal { padding-bottom: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body.legal > .lg-main { flex: 1 0 auto; }
.lg-bar { display: flex; align-items: center; gap: 16px; min-height: var(--mb); border-bottom: 1px solid var(--line); }
.lg-bar nav { margin-left: auto; display: flex; gap: 4px; margin-right: -12px; }
.lg-bar nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--muted); font-weight: 500; font-size: 16px; text-decoration: none; transition: color .2s; }
.lg-bar nav a:hover { color: var(--white); }

.lg-main { display: grid; grid-template-columns: var(--copyw) minmax(0, 1fr); gap: var(--gap); align-items: start; padding-top: 56px; padding-bottom: 88px; }
.lg-side { position: sticky; top: 32px; }
.lg-side h1 { font-size: clamp(40px, 3.6vw, 76px); }
.lg-side .lead { max-width: 30ch; }
.lg-date { margin-top: 20px; color: var(--muted); font-size: 15px; }
.lg-toc { margin-top: 36px; border-top: 1px solid var(--line); counter-reset: toc; }
.lg-toc a { display: flex; align-items: center; gap: 14px; min-height: 48px; border-bottom: 1px solid var(--line); color: var(--muted); font-weight: 500; font-size: 16px; text-decoration: none; transition: color .2s; }
.lg-toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); flex: none; width: 2ch; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.lg-toc a:hover { color: var(--white); }
.lg-contact { margin-top: 32px; display: grid; gap: 4px; font-size: 16px; color: var(--muted); }
.lg-contact a { display: flex; align-items: center; min-height: 44px; color: var(--white); font-weight: 600; font-size: 18px; overflow-wrap: anywhere; }

.lg-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 64px; padding: clamp(24px, 3vw, 64px); font-size: 16px; line-height: 1.6; }
.lg-text section { display: grid; align-content: start; gap: 12px; }
.lg-text h2 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(22px, 1.5vw, 30px); line-height: 1.15; }
.lg-text h2::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--cobalt); transform: translateY(-2px); }
.lg-text p, .lg-text li { max-width: 68ch; color: var(--navy); }
.lg-text ul, .lg-text ol { display: grid; gap: 8px; }
.lg-text ul li { position: relative; padding-left: 20px; }
.lg-text ul li::before { content: ""; position: absolute; left: 2px; top: .65em; width: 6px; height: 6px; background: var(--navy); }
.lg-text ol { counter-reset: step; }
.lg-text ol li { position: relative; padding-left: 40px; counter-increment: step; }
.lg-text ol li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; background: var(--navy); color: var(--white); font: 600 14px/1 var(--display); }
.lg-text a { color: var(--cobalt); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lg-text a:hover { color: var(--navy); }
.lg-text strong { font-weight: 600; }
.lg-note { color: var(--g3); font-size: 15px; }

@media (min-width: 1200px) {
  .lg-text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 2200px) {
  /* still two columns: three leave a lone section or an empty cell with 4 or 8 sections, four make lines too short */
  .lg-text { font-size: 18px; }
  .lg-text p, .lg-text li { max-width: 50ch; } /* Instrument Sans ch is a wide zero: 50ch is about 70 characters of text */
  .lg-toc a, .lg-contact, .lg-bar nav a { font-size: 18px; }
}
@media (max-width: 899px) {
  .lg-main { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 40px; padding-bottom: 56px; }
  .lg-side { position: static; }
  .lg-bar nav { gap: 0; }
}