/* Public pages (/about, /privacy, /terms): the app's own look (tokens and self-hosted fonts from app.css),
   readable on a phone, no scripts, no external resources. Light and dark follow app.css's tokens. */
.pub-body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); }
.pub-wrap { max-width: 680px; margin: 0 auto; padding-block: 28px 48px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

.pub-head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pub-head .who { display: flex; flex-direction: column; gap: 2px; }
.pub-head .who b { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.1; color: var(--ink); }
.pub-head .who span { color: var(--ink-2); font-size: 14px; }
.pub-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pub-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; }
.pub-nav a:hover { border-color: var(--ink-2); }
.pub-nav a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pub-nav a:focus-visible, .pub-main a:focus-visible, .pub-foot a:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.pub-main h1 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.15; margin: 28px 0 6px; text-wrap: balance; letter-spacing: -.01em; }
.pub-main .updated { color: var(--ink-2); font-size: 14px; margin: 0 0 22px; }
.pub-main h2 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.25; margin: 32px 0 8px; text-wrap: balance; }
.pub-main p, .pub-main li { overflow-wrap: anywhere; max-width: 65ch; }
.pub-main p { margin: 0 0 12px; }
.pub-main ul { padding-left: 22px; margin: 0 0 12px; }
.pub-main li { margin: 6px 0; }
.pub-main li::marker { color: var(--clay); }
.pub-main a { color: var(--moss-ink); text-underline-offset: 3px; }
.pub-main strong, .pub-main b { font-weight: 600; }
.pub-main .lead { font-size: 18px; line-height: 1.55; }
.pub-main .box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px 18px; margin: 20px 0; }
.pub-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 10px; padding: 0 22px;
  border-radius: var(--r); background: var(--clay); color: var(--accent-ink) !important; text-decoration: none; font-weight: 600; }

.pub-foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; }
.pub-foot p { margin: 4px 0; }
.pub-foot a { color: var(--ink-2); }

@media (max-width: 480px) {
  .pub-wrap { padding-block: 20px 36px; }
  .pub-main h1 { font-size: 27px; }
}