/* ================================================ PSYCHE FACTS PRIVACY PAGE
   The one route on this site that is not the deck.

   It reuses site.css for the ground, the palette, the masthead and the footer,
   and adds only what a page of prose needs. Loaded on /privacy alone, so the
   deck's payload does not carry it.

   The measure is capped here and NOT on the page wrapper. The wrapper stays the
   site's own full width, the way the deck's does; it is the running text inside
   it that gets a reading width, which is a different thing.
   ========================================================================= */

.masthead .wordmark a {
  color: inherit;
  text-decoration: none;
}

.masthead .wordmark a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--rule);
}

.prose {
  max-width: 62ch; /* the running text, not the page */
  margin-top: 46px;
  /* Starts on the rail's left edge, under the wordmark (Chad, 2026-09-26).
     The masthead centres on --rail inside the wider .page; without this the
     prose sat on .page's own left edge, well left of the title. */
  margin-left: max(0px, calc((100% - var(--rail)) / 2));
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.72;
  color: var(--ink);
}

.prose h2 {
  margin: 0 0 6px;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--f);
  font-size: clamp(23px, 3.2vw, 31px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink-bright);
}

.prose h3 {
  margin: 34px 0 9px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-bright);
}

.prose p {
  margin: 0 0 14px;
}

.prose-date {
  margin: 12px 0 26px !important;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.prose strong {
  font-weight: 700;
  color: var(--ink-bright);
}

.prose code {
  padding: 1px 4px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  font-family: var(--f-mono);
  font-size: 11px;
  white-space: nowrap;
}

.prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
  transition: color var(--t-ui) ease, text-decoration-color var(--t-ui) ease;
}

.prose a:hover {
  color: var(--ink-bright);
  text-decoration-color: var(--ink);
}

/* The cookie table. Wide content scrolls inside its own box rather than
   pushing the page sideways on a phone. */
.prose-table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 4px 0 18px;
  border-collapse: collapse;
  font-size: 11.5px;
}

.prose-table thead th {
  padding: 7px 12px 7px 0;
  border-bottom: 1px solid var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--ink-bright);
}

.prose-table td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  line-height: 1.55;
}

.prose-table td:last-child {
  padding-right: 0;
  white-space: nowrap;
  color: var(--ink-dim);
}

.prose-back {
  margin-top: 34px !important;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .prose {
    margin-top: 32px;
    font-size: 12px;
  }
  .prose-table td:last-child {
    white-space: normal;
  }
}

/* /libra-engine (2026-09-26) is also served with this sheet: the sister sites,
   one row each, name then its line, on the same hairline rules as the prose. */
.le-sites {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
}
.le-sites li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.le-sites span { color: var(--ink-dim); }