/* site.css — what the public pages share (9 October 2026): the landing page,
   Privacy and Contact. Moved unchanged from index.html's inline styles: the
   base, the top bar, form fields and the footer. Everything comes from
   tokens.css and patterns.css; this is layout only, prefixed lp-. Each page
   keeps its own layout inline. */

body { margin: 0; background: var(--vv-stage); color: var(--vv-text); font-family: var(--vv-font-ui); }
/* `hidden` must win over a component's own display (.lp-demo is flex,
   .vv-btn inline-flex), or the empty demo player and "Listen to a
   chapter" show with no demo to play (fixed 8 October 2026). */
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: var(--vv-focus-ring); outline-offset: var(--vv-focus-offset); }

.lp-nav { display: flex; align-items: center; gap: var(--vv-space-8); height: 88px; position: relative; z-index: 2; }
.lp-wordmark { font-size: 2.25rem; }
.lp-links { display: flex; gap: var(--vv-space-8); margin-left: auto; }
.lp-links a { color: var(--vv-text-2); text-decoration: none; font-size: var(--vv-size-base); }
.lp-links a:hover { color: var(--vv-text); }

.lp-form { display: flex; flex-direction: column; gap: var(--vv-space-4); }
.lp-field { display: flex; flex-direction: column; gap: 6px; }
.lp-field input, .lp-field select { min-height: var(--vv-hit); padding: 0 var(--vv-space-4); border-radius: var(--vv-radius-sm); border: 1px solid var(--vv-line-strong); background: var(--vv-stage-sunk); color: var(--vv-text); font: inherit; font-size: var(--vv-size-base); }
.lp-field textarea { min-height: 160px; padding: var(--vv-space-3) var(--vv-space-4); border-radius: var(--vv-radius-sm); border: 1px solid var(--vv-line-strong); background: var(--vv-stage-sunk); color: var(--vv-text); font: inherit; font-size: var(--vv-size-base); line-height: var(--vv-leading-ui); resize: vertical; }
.lp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-status { margin: 0; min-height: 1.5em; font-size: var(--vv-size-m); color: var(--vv-text-2); }
.lp-status--ok { color: var(--vv-amber); }
.lp-fine { margin: 0; color: var(--vv-text-2); font-size: var(--vv-size-xs); line-height: var(--vv-leading-ui); }

.lp-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vv-space-6); margin-top: var(--vv-space-16); padding: var(--vv-space-8) 0 var(--vv-space-12); border-top: 1px solid var(--vv-line); color: var(--vv-text-2); font-size: var(--vv-size-s); }
.lp-footer nav { display: flex; gap: var(--vv-space-6); margin-left: auto; }
.lp-footer a { color: var(--vv-text-2); }
.lp-footer a[aria-current="page"] { color: var(--vv-text); }
.lp-privacy { max-width: 860px; color: var(--vv-text-2); font-size: var(--vv-size-s); line-height: var(--vv-leading-ui); }

@media (max-width: 680px) {
  .vv-container { width: calc(100% - 2 * var(--vv-space-5)); }
  .lp-links { display: none; }
  .lp-nav { height: 72px; justify-content: space-between; }
  .lp-wordmark { font-size: 1.75rem; }
}

/* A page of reading (Privacy, Contact): one comfortable column. */
.lp-page { max-width: 760px; padding: var(--vv-space-12) 0 0; }
.lp-page .vv-section-title { font-size: clamp(3rem, 7vw, 5rem); margin: 0 0 var(--vv-space-6); }
.lp-page .vv-lead { margin: 0 0 var(--vv-space-10); }
.lp-prose { color: var(--vv-text-2); font-size: var(--vv-size-m); line-height: var(--vv-leading-ui); }
.lp-prose h2 { margin: var(--vv-space-10) 0 var(--vv-space-3); color: var(--vv-text); font-size: var(--vv-size-l); font-weight: var(--vv-weight-semibold); }
.lp-prose p, .lp-prose ul { margin: 0 0 var(--vv-space-4); }
.lp-prose ul { padding-left: 1.25em; }
.lp-prose li { margin-bottom: var(--vv-space-2); }
.lp-prose strong { color: var(--vv-text); font-weight: var(--vv-weight-semibold); }
.lp-prose a { color: var(--vv-amber); }
.lp-effective { margin: var(--vv-space-10) 0 0; color: var(--vv-text-2); font-size: var(--vv-size-s); }