/*
  The one stylesheet the three legal documents share: /privacy, /terms, /dpa.

  Same-origin and script-free on purpose. The documents are plain HTML in
  `public/` so they never boot the application (see the comment at the top of
  privacy.html); a stylesheet beside them keeps that guarantee and keeps the
  three pages from drifting apart visually. If this file fails to load, each
  page still reads top to bottom as an ordinary document.

  Brand values are the portal's own: STARSHIP_WINE and STARSHIP_INK from
  src/ui/StarshipLogo.tsx, and Geist 500 from public/fonts for the wordmark and
  the headings, exactly as the landing header sets them.
*/

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #fbfaf8;
  --surface: #ffffff;
  --ink: #343434;
  --text: #2b2928;
  --text-2: #55504d;
  --muted: #827c78;
  --rule: #e9e5e1;
  --rule-strong: #d9d3ce;
  --wine: #5c0632;
  --wine-text: #5c0632;
  --wine-soft: #f7eef2;
  --wine-rule: #e6cbd8;
  --code-bg: #f2efec;
  --display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141213;
    --surface: #1b1819;
    --ink: #ece8e5;
    --text: #e4dfdb;
    --text-2: #bdb6b1;
    --muted: #938c87;
    --rule: #2c2729;
    --rule-strong: #3a3436;
    --wine-text: #e9a8c6;
    --wine-soft: #26141c;
    --wine-rule: #4a2536;
    --code-bg: #242022;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.7 var(--body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--wine-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.bar {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}

.brand svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.brand .wordmark {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.brand .section {
  margin-left: 0.35rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--rule-strong);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: 0;
}

.doc-nav {
  display: flex;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.doc-nav a {
  color: var(--text-2);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}

.doc-nav a:hover {
  color: var(--ink);
  background: var(--code-bg);
}

.doc-nav a[aria-current="page"] {
  color: var(--wine-text);
  background: var(--wine-soft);
  font-weight: 600;
}

/* ------------------------------------------------------------------ hero -- */

.hero {
  max-width: 72rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 2.5rem;
}

.eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine-text);
}

.hero h1 {
  margin: 0;
  max-width: 40rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.hero .lede {
  max-width: 42rem;
  margin: 1.1rem 0 0;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text-2);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.25rem;
  margin: 2rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--rule);
}

.facts div {
  margin: 0;
}

.facts dt {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.facts dd {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
  color: var(--ink);
}

/* ---------------------------------------------------------------- layout -- */

.layout {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 64rem) {
  .layout {
    grid-template-columns: 15rem minmax(0, 46rem);
    gap: 4.5rem;
  }
}

.toc {
  font-size: 0.88rem;
  line-height: 1.45;
}

@media (min-width: 64rem) {
  .toc {
    position: sticky;
    top: 5.5rem;
    align-self: start;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}

.toc p {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule);
}

.toc li {
  margin: 0;
}

.toc a {
  display: block;
  padding: 0.3rem 0 0.3rem 0.9rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--text-2);
  text-decoration: none;
}

.toc a:hover {
  color: var(--wine-text);
  border-left-color: var(--wine-text);
}

@media (max-width: 63.99rem) {
  .toc {
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 12px;
  }

  .toc ol {
    border-left: 0;
    columns: 2 14rem;
    column-gap: 1.5rem;
  }

  .toc a {
    padding-left: 0;
    border-left: 0;
  }
}

/* -------------------------------------------------------------- document -- */

.doc {
  min-width: 0;
}

.doc > section {
  scroll-margin-top: 5.5rem;
  padding: 2.25rem 0 0.25rem;
  border-top: 1px solid var(--rule);
}

.doc > section:first-child {
  border-top: 0;
  padding-top: 0;
}

.doc h2 {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.doc h2 .num {
  flex: none;
  min-width: 1.9rem;
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--wine-text);
  font-variant-numeric: tabular-nums;
}

.doc h3 {
  margin: 1.75rem 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.doc p,
.doc li,
.doc dd {
  color: var(--text);
}

.doc p {
  margin: 0 0 1rem;
}

.doc ul,
.doc ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.doc li {
  margin: 0.35rem 0;
}

.doc li::marker {
  color: var(--muted);
}

.doc strong {
  color: var(--ink);
  font-weight: 600;
}

.doc code {
  background: var(--code-bg);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--ink);
}

.doc dl {
  margin: 0 0 1rem;
}

.doc dt {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.doc dd {
  margin: 0.25rem 0 0;
}

/* A numbered clause inside a section: "4.2 Never sell or share it." */
.clause {
  margin: 0 0 1.1rem;
}

.clause > .ref {
  font-weight: 600;
  color: var(--ink);
  margin-right: 0.35rem;
}

/* The thing the reader must not miss in a section. */
.note {
  margin: 1.25rem 0;
  padding: 1rem 1.2rem;
  background: var(--wine-soft);
  border: 1px solid var(--wine-rule);
  border-left: 3px solid var(--wine);
  border-radius: 10px;
}

.note p:last-child,
.note ul:last-child {
  margin-bottom: 0;
}

.note .label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wine-text);
}

/* Company identity, as a two-column card. */
.identity {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0;
  margin: 1rem 0 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.95rem;
}

.identity dt,
.identity dd {
  margin: 0;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--rule);
}

.identity dt {
  font-weight: 500;
  color: var(--muted);
}

.identity dd {
  color: var(--ink);
}

.identity dt:first-of-type,
.identity dt:first-of-type + dd {
  border-top: 0;
}

@media (max-width: 36rem) {
  .identity {
    grid-template-columns: 1fr;
  }

  .identity dt {
    padding-bottom: 0;
  }

  .identity dd {
    border-top: 0;
    padding-top: 0.1rem;
  }
}

.table {
  margin: 1rem 0 1.25rem;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
}

.table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  line-height: 1.55;
}

.table th,
.table td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--rule);
}

.table tr:first-child th,
.table tr:first-child td {
  border-top: 0;
}

.table th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--code-bg);
  white-space: nowrap;
}

.table td strong {
  white-space: nowrap;
}

/* An annex starts a new part of the document, not just another section. */
.doc > section.annex {
  margin-top: 2.5rem;
  border-top: 2px solid var(--ink);
}

.doc > section.annex h2 .num {
  min-width: auto;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--wine-soft);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--surface);
}

.site-footer .inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.site-footer p {
  margin: 0;
  max-width: 34rem;
  line-height: 1.6;
}

.site-footer strong {
  color: var(--ink);
  font-weight: 600;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: flex-start;
}

.site-footer nav a {
  color: var(--text-2);
  text-decoration: none;
}

.site-footer nav a:hover {
  color: var(--wine-text);
}

/* ------------------------------------------------------------ small / print -- */

@media (max-width: 40rem) {
  /* Two rows tall on a phone: pinned, it would take a sixth of the screen. */
  .site-header {
    position: static;
  }

  .bar {
    height: auto;
    padding-top: 0.75rem;
    padding-bottom: 0.6rem;
    flex-wrap: wrap;
  }

  .brand .section {
    display: none;
  }

  .doc-nav {
    width: 100%;
    margin: 0 -0.75rem;
    overflow-x: auto;
  }

  .hero {
    padding-top: 2.5rem;
  }
}

@media print {
  :root {
    color-scheme: light;
    --bg: #fff;
    --surface: #fff;
    --text: #000;
    --ink: #000;
    --wine-text: #5c0632;
    --wine-soft: #fff;
  }

  .site-header {
    position: static;
    backdrop-filter: none;
  }

  .doc-nav,
  .toc,
  .site-footer nav {
    display: none;
  }

  .layout {
    display: block;
  }

  .doc > section {
    break-inside: auto;
  }

  .doc h2 {
    break-after: avoid;
  }
}