/* ==========================================================================
   Legal pages — privacy policy, terms. One column, long-form reading.
   Loads after nav.css and styles.css, which supply the tokens and the
   shared header and footer.
   ========================================================================== */

.legal { padding: clamp(48px, 6vw, 88px) var(--pad-x) clamp(64px, 8vw, 120px); background: var(--paper); }
.legal__wrap { max-width: 760px; margin: 0 auto; }

.legal__eyebrow {
  font-family: var(--label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 14px;
}
.legal__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4.75vw, 67px);
  line-height: 1.08;
  letter-spacing: -.04em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.legal__dates {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.legal__lede {
  margin: 26px 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--body);
  text-wrap: pretty;
}

/* The jump list. Plain links, not a boxed widget: the page is short enough
   that a heavy table of contents would outweigh what it indexes. */
.legal__toc {
  margin: 40px 0 0;
  padding: 24px 28px;
  background: var(--white);
  border: 1px solid var(--hairline-2);
  border-radius: 16px;
}
.legal__toc h2 {
  font-family: var(--label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.legal__toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal__toc li { margin: 0 0 7px; font-size: 15px; break-inside: avoid; }
.legal__toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.legal__toc a:hover { color: var(--clay); border-bottom-color: currentColor; }
@media (max-width: 560px) { .legal__toc ol { columns: 1; } }

.legal__body { margin-top: clamp(40px, 5vw, 64px); }

/* scroll-margin so an anchored heading is not tucked under nothing — the bar
   does not stick, but a little breathing room reads better on arrival. */
.legal__body h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(23px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -.04em;
  color: var(--ink);
  margin: 52px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--hairline-2);
  scroll-margin-top: 24px;
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.legal__body h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  margin: 30px 0 0;
}

.legal__body p,
.legal__body li {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--body);
  text-wrap: pretty;
}
.legal__body p { margin: 14px 0 0; }
.legal__body ul { margin: 14px 0 0; padding-left: 22px; }
.legal__body li { margin: 0 0 9px; }
.legal__body li::marker { color: var(--clay); }
.legal__body strong { color: var(--ink); font-weight: 600; }

.legal__body a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(188,122,72,.5); text-underline-offset: 3px; }
.legal__body a:hover { color: var(--clay); text-decoration-color: currentColor; }

/* A definition-style table for the data-we-collect and sharing sections.
   Stacks into labelled blocks on a phone rather than scrolling sideways. */
.legal__table { width: 100%; border-collapse: collapse; margin: 20px 0 0; font-size: 15.5px; }
.legal__table th,
.legal__table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hairline-2); line-height: 1.6; }
.legal__table th { font-family: var(--sans); font-weight: 600; color: var(--ink); width: 34%; }
.legal__table td { color: var(--body); }
@media (max-width: 600px) {
  .legal__table, .legal__table tbody, .legal__table tr, .legal__table th, .legal__table td { display: block; width: auto; }
  .legal__table tr { padding: 16px 0; border-bottom: 1px solid var(--hairline-2); }
  .legal__table th { padding: 0 0 4px; border: none; }
  .legal__table td { padding: 0; border: none; }
}

/* Pulled out of the flow so the one action on the page is findable. */
.legal__callout {
  margin: 24px 0 0;
  padding: 22px 26px;
  background: var(--white);
  border: 1px solid var(--hairline-2);
  border-left: 3px solid var(--clay);
  border-radius: 14px;
}
.legal__callout p:first-child { margin-top: 0; }

.legal__btn {
  display: inline-block;
  margin: 18px 0 0;
  background: var(--forest);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  padding: 13px 24px;
  font-family: var(--label);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease);
}
.legal__btn:hover { background: #3f5338; color: var(--paper); }

/* Cookiebot writes its own declaration table in here; it arrives unstyled,
   so hold it to the column width and keep it from scrolling the page. */
.legal__declaration { margin: 22px 0 0; font-size: 15px; overflow-x: auto; }
.legal__declaration a { color: var(--ink); }

.legal :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }