/*
  Shared stylesheet for the three standalone legal documents:
  privacy.html, terms.html, disclosures.html.

  Deliberately standalone, exactly like materials-pending.html: no React, no
  bundle, no Tailwind. These pages must render even if the application build
  is broken, because broken legal links on a page carrying a securities
  offering are worse than absent ones.

  Palette is lifted from tailwind.config.ts so the documents read as part of
  the same site. Contrast pairs were chosen from the tokens that already
  passed the WCAG AA audit (cream-300 on burgundy-900, gold-500 on
  burgundy-900); do not swap in gold-600 or cream-400 without re-checking.
*/

:root {
  --burgundy-950: #1a050c;
  --burgundy-900: #230810;
  --burgundy-700: #3a0d1c;
  --cream-50: #fdfaf3;
  --cream-100: #f4ebda;
  --cream-300: #d3c3a3;
  --gold-400: #d9b64a;
  --gold-500: #c9a227;
  --rule: rgb(255 255 255 / 0.1);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 1.5rem 6rem;
  background: var(--burgundy-900);
  color: var(--cream-100);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.doc {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
}

/* Masthead ---------------------------------------------------------------- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.5rem 0 0;
}

.wordmark {
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 0.875rem;
  margin: 0;
  color: var(--cream-50);
  text-decoration: none;
}

.wordmark span {
  display: block;
  color: var(--cream-300);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  margin-top: 0.35rem;
}

.back {
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Document head ----------------------------------------------------------- */

.eyebrow {
  margin: 4rem 0 0;
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-500);
}

h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.1;
  margin: 0.75rem 0 0;
  color: var(--cream-50);
  text-wrap: balance;
}

.dateline {
  margin: 1.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--cream-300);
}

.lede {
  margin: 2rem 0 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.125rem;
  color: var(--cream-100);
}

/* Body -------------------------------------------------------------------- */

h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
  margin: 3.5rem 0 0;
  color: var(--cream-50);
  scroll-margin-top: 2rem;
}

h2 .num {
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--gold-500);
  margin-right: 0.625rem;
  letter-spacing: 0.08em;
}

h3 {
  font-weight: 600;
  font-size: 1rem;
  margin: 2rem 0 0;
  color: var(--cream-50);
}

p {
  margin: 1.125rem 0 0;
}

ul,
ol {
  margin: 1.125rem 0 0;
  padding-left: 1.25rem;
}

li {
  margin-top: 0.625rem;
}

li::marker {
  color: var(--gold-500);
}

strong {
  color: var(--cream-50);
  font-weight: 600;
}

a {
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--gold-400);
}

a:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}

/* Callout ----------------------------------------------------------------- */

.callout {
  margin: 2rem 0 0;
  padding: 1.5rem 1.5rem 1.75rem;
  background: var(--burgundy-950);
  border-left: 3px solid var(--gold-500);
  border-radius: 2px;
}

.callout p:first-child {
  margin-top: 0;
}

.callout .label {
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 0.5rem;
}

/* Definition rows --------------------------------------------------------- */

.rows {
  margin: 1.5rem 0 0;
  border-top: 1px solid var(--rule);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 40rem) {
  .row {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: 1.5rem;
  }
}

.row dt {
  font-weight: 600;
  color: var(--cream-50);
  font-size: 0.9375rem;
}

.row dd {
  margin: 0;
  color: var(--cream-300);
  font-size: 0.9375rem;
}

/* Footer ------------------------------------------------------------------ */

.doc-footer {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.fine {
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--cream-300);
  margin-top: 1.25rem;
}

.sibling-links {
  margin-top: 2rem;
  font-size: 0.8125rem;
}

.sibling-links a {
  margin-right: 1.25rem;
  white-space: nowrap;
}

/* Print ------------------------------------------------------------------- */

@media print {
  :root {
    color-scheme: light;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  .wordmark,
  h1,
  h2,
  h3,
  strong,
  .row dt {
    color: #000;
  }
  .dateline,
  .fine,
  .row dd {
    color: #333;
  }
  .eyebrow,
  h2 .num,
  li::marker {
    color: #6b5310;
  }
  a {
    color: #000;
  }
  .back,
  .sibling-links {
    display: none;
  }
  .callout {
    background: #f4f4f4;
    border-left-color: #6b5310;
  }
}