/* Legal pages (Privacy Policy, Terms of Service) */
.legal-page { background: var(--bg); }
.legal-inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 72px 24px 120px; }

/* ---------- Title block ---------- */
.legal-head { padding-bottom: 40px; border-bottom: 1px solid var(--border); }
.legal-head .kicker { display: block; }
.legal-h1 { margin-top: 18px; font-size: clamp(38px, 5vw, 60px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.legal-meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; color: var(--text-muted); }
.legal-meta strong { color: var(--text-soft); font-weight: 500; }
.legal-meta a { color: var(--text-soft); border-bottom: 1px solid var(--border); }
.legal-meta a:hover { color: var(--gold-bright); border-color: var(--gold); }

/* ---------- Making position: sticky work at all ----------
   styles.css sets `overflow: hidden` on every <section> and `overflow-x: hidden`
   on the body. Either one turns an ancestor into a scroll container, which
   silently defeats `position: sticky` on the contents column. `clip` holds back
   the same horizontal overflow without creating that container. Scoped to the
   legal pages so styles.css keeps its behaviour everywhere else. */
body.legal { overflow-x: clip; }
.legal-page { overflow: visible; }

/* Height of the fixed chrome above the text: the site header, plus the contents
   bar once it becomes a sticky strip on narrow screens. legal.js keeps both in
   step with what is actually rendered; these are the first-paint fallbacks. */
:root { --header-h: 78px; --toc-bar-h: 0px; }
@media (max-width: 640px) { :root { --header-h: 91px; } }

/* ---------- Two-column layout: sticky contents + reading column ---------- */
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 48px; }
@media (min-width: 1000px) {
  .legal-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 72px; align-items: start; }
  .legal-toc { position: sticky; top: calc(var(--header-h) + 24px); }
  .toc-list {
    max-height: calc(100vh - var(--header-h) - 64px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
}

/* Contents */
.legal-toc-title { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.legal-toc ol { list-style: none; margin-top: 14px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0; font-size: 13.5px; line-height: 1.4;
  color: var(--text-muted);
  border-left: 1px solid var(--border); padding-left: 14px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.legal-toc a::before { content: counter(toc, decimal-leading-zero); font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.legal-toc a:hover { color: var(--gold-bright); border-color: var(--gold); }
.legal-toc a.is-active { color: var(--gold-bright); border-left-color: var(--gold); }
.legal-toc a.is-active::before { color: var(--gold); }

/* The toggle only exists once the contents collapse into a bar. */
.toc-toggle { display: none; }

/* ---------- Narrow screens: the contents become a sticky strip ----------
   Twenty-nine entries cannot live permanently on a phone, so the column turns
   into a bar under the header showing the section you are in, which opens the
   full list on tap. */
@media (max-width: 999px) {
  .legal-toc {
    position: sticky; top: var(--header-h); z-index: 40;
    margin: 0 -24px; padding: 0 24px;
    background: var(--bg); border-bottom: 1px solid var(--border);
  }
  .legal-toc-title { display: none; }
  .toc-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 13px 0;
    font: inherit; font-size: 13px; font-weight: 500; color: var(--text-soft);
    background: none; border: 0; text-align: left; cursor: pointer;
  }
  .toc-toggle:hover { color: var(--gold-bright); }
  .toc-toggle-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .toc-chevron { width: 12px; height: 8px; flex-shrink: 0; color: var(--gold); transition: transform 0.2s ease; }
  .legal-toc.is-open .toc-chevron { transform: rotate(180deg); }

  .legal-toc ol { columns: 2; column-gap: 28px; margin-top: 0; padding-bottom: 16px; }
  .legal-toc li { break-inside: avoid; }

  /* With JS the list hides behind the bar. Without it, it stays expanded and
     the page behaves exactly as it does today. */
  .js .legal-toc .toc-list { display: none; }
  .js .legal-toc.is-open .toc-list {
    display: block; max-height: 58vh;
    overflow-y: auto; overscroll-behavior: contain;
  }
}
@media (max-width: 640px) { .legal-toc { margin: 0 -20px; padding: 0 20px; } }
@media (max-width: 560px) {
  .legal-toc a { font-size: 12.5px; padding-left: 10px; gap: 8px; }
  .legal-toc ol { columns: 1; }
}

/* ---------- Reading column ---------- */
.legal-body { max-width: 70ch; font-size: 16.5px; line-height: 1.7; color: var(--text-soft); }
.legal-body > * + * { margin-top: 1.1em; }

.legal-body h2 {
  margin-top: 64px; padding-top: 22px;
  font-size: clamp(22px, 2.4vw, 27px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2;
  color: var(--text); text-wrap: balance;
  position: relative;
}
.legal-body h2::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 2px; background: var(--gold); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { margin-top: 36px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.legal-body h2 + h3 { margin-top: 24px; }
.legal-body h2 + p, .legal-body h3 + p, .legal-body h3 + ul, .legal-body h3 + ol { margin-top: 14px; }

.legal-body strong { color: var(--text); font-weight: 700; }
.legal-body a { color: var(--gold-bright); border-bottom: 1px solid rgba(212, 168, 67, 0.35); transition: color 0.2s ease, border-color 0.2s ease; }
.legal-body a:hover { color: #f0cd7a; border-color: var(--gold-bright); }
.legal-body a[href^="mailto:"] { word-break: break-word; }

.legal-body ol, .legal-body ul { padding-left: 1.5em; }
.legal-body li { padding-left: 0.35em; }
.legal-body li + li { margin-top: 0.5em; }
.legal-body li::marker { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.legal-body ul li::marker { color: var(--gold); font-size: 0.9em; }

/* Conspicuous (all-caps) provisions */
.legal-body .notice {
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--gold-deep);
  color: var(--text);
  font-size: 15px; line-height: 1.7; letter-spacing: 0.01em;
}
.legal-body .notice + .notice { margin-top: 0.85em; }

/* Postal address */
.legal-body address { font-style: normal; line-height: 1.6; color: var(--text); padding: 18px 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated); display: inline-block; }

/* Heading anchors: keep them clear of the sticky header and contents bar */
.legal-body [id] { scroll-margin-top: calc(var(--header-h) + var(--toc-bar-h) + 20px); }

/* Bottom cross-link */
.legal-related { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--border); font-size: 15px; color: var(--text-muted); }
.legal-related a { color: var(--text-soft); border-bottom: 1px solid var(--border); }
.legal-related a:hover { color: var(--gold-bright); border-color: var(--gold); }

@media (max-width: 640px) {
  .legal-inner { padding: 48px 20px 88px; }
  .legal-body { font-size: 16px; }
  .legal-body h2 { margin-top: 52px; }
  .legal-body .notice { padding-left: 16px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .legal-toc, .legal-related { display: none !important; }
  .legal-page, body { background: #fff !important; color: #000 !important; }
  .legal-h1, .legal-body, .legal-body h2, .legal-body h3, .legal-body strong, .legal-body .notice, .legal-body address, .legal-meta, .legal-meta strong, .legal-meta a { color: #000 !important; }
  .legal-body a { color: #000 !important; border: 0 !important; text-decoration: underline; }
  .legal-body address { border-color: #999; background: none; }
  .legal-layout { display: block; }
  .legal-body { max-width: none; font-size: 11pt; }
  .legal-body h2 { break-after: avoid; }
}