/* Legal pages (隐私政策 / 用户协议).
   ---------------------------------------------------------------------------
   These two pages now link ../styles.css first and only carry their own layout
   here. Before that they were a second, unlinked source of truth: every colour
   and the font stack were hardcoded, and the values had already drifted from
   the tokens they were meant to match — #18312d / #f5f2ea / #98614d / #67716c /
   #d9ded7 here versus --ink #17231f / --paper #f5f3ee / --accent #9c6144 /
   --muted #6a716d / --line #deded8 there. They also inherited none of the
   shared focus ring, motion tokens or reduced-motion behaviour.

   Depends on styles.css for: the `:root` tokens (colours, radii, durations,
   easings), the base reset (`body { margin: 0 }`, the font stack) and the
   global `button:focus-visible, a:focus-visible` outline. */

main {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(40px, 8vw, 72px) 0 clamp(64px, 12vw, 104px);
}

.eyebrow { color: var(--accent); font-size: 12px; letter-spacing: .12em; }

h1 {
  margin: 14px 0 12px;
  font-family: Georgia, "Songti SC", serif;
  font-size: clamp(34px, 7vw, 58px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
  text-wrap: balance;
}

/* `--muted` is the shared palette's metadata tone (the public feed uses it at
   12px for exactly this role). Policy body copy below is primary content, and
   the public feed sets primary copy in `--ink`. The previous body value here,
   #536660, was a legal-page-only colour that existed nowhere else in the
   product — which is how it drifted from the tokens in the first place. */
.updated { color: var(--muted); font-size: 13px; }

article {
  margin-top: clamp(28px, 5vw, 44px);
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 12px 32px rgba(23, 53, 45, .05);
}

h2 {
  margin: 0 0 12px;
  font-family: Georgia, "Songti SC", serif;
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 400;
}

h2:not(:first-child) { margin-top: 34px; }

p, li { color: var(--ink); font-size: 15px; line-height: 1.9; }

p { margin: 0; }

a { color: var(--forest); }

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface);
  text-decoration: none;
  transition: transform var(--dur-3) var(--ease-spring),
              border-color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}

.back:hover { border-color: rgba(21, 60, 53, .34); background: #fff; transform: translateX(-2px); }
.back:active { transform: scale(.97); transition-duration: var(--dur-press); transition-timing-function: var(--ease-out); }

@media (max-width: 560px) {
  article { border-radius: 18px; }
  .back { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .back { transition: none; }
  .back:hover, .back:active { transform: none; }
}