/* 隐私政策 (privacy.html), 「自由拼贴」 (owner-approved V2, 2026-10-12). Phones first; every colour is a token.
   A big quiet title with one promise line, a calm key-tint block with one cat ear, Sandy asleep on her locked diary on
   its edge; then the policy as plain prose in one reading column, sections split by hairlines with a small colour tab.
   The site nav is on top (there is always a way back). The art layer is assets/more-art.css. */
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--color-bg); font-family: var(--font-body); line-height: 1.7; }
.privacy-app { position: relative; width: calc(100% - 2 * var(--layout-gutter)); min-width: 0; margin: 0 auto; padding: var(--space-5) 0 calc(var(--space-6) * 2); overflow-x: clip; }
/* Desktop: the same companion rail as 联系我 and 支持 Sandy (nav.css), so Sandy's dock never sits on the text */
@media (min-width: 901px) {
  body.has-app-nav:is(.has-sandy-dock, :has(.floating-sandy-toggle, #sandy)) .privacy-app { padding-right: var(--layout-companion-rail); }
}
.privacy-app > * { width: min(860px, 100%); margin-inline: auto; }

/* ── hero ── */
.privacy-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-5); min-height: 440px; padding-top: 40px; }
.privacy-hero-text { position: relative; z-index: 2; min-width: 0; padding-top: 24px; }
.privacy-title { margin: 0; font-size: clamp(3rem, 6.4vw, 4.75rem); font-weight: 700; letter-spacing: .06em; line-height: 1.12; word-break: keep-all; line-break: strict; }
html[lang="en"] .privacy-title { font-size: clamp(2.5rem, 4.6vw, 3.5rem); letter-spacing: 0; }
.privacy-hero .privacy-promise { margin: 44px 0 0; color: var(--ink); font-size: 1.0625rem; font-weight: 500; line-height: 1.75; word-break: keep-all; line-break: strict; }
.privacy-hero .privacy-updated { margin: var(--space-2) 0 0; color: var(--muted); font-size: .875rem; }
.privacy-hero-art { position: relative; min-height: 340px; }
.privacy-p-sandy { z-index: 2; width: 250px; right: 40px; top: 72px; }
.privacy-p-key { width: 60px; right: 18px; top: 270px; rotate: 22deg; }
.privacy-p-lock { width: 48px; right: 300px; top: 300px; rotate: -10deg; }
.privacy-p-burst { width: 52px; right: 52px; top: 40px; }

/* ── the policy: one reading column, offset a little from the title like a letter ── */
.privacy-app .privacy-lead { margin-top: 24px; padding-left: 8%; color: var(--ink); font-size: 1.125rem; line-height: 1.9; overflow-wrap: anywhere; }
.privacy-app .privacy-lead, .privacy-read { max-width: calc(620px + 8%); }
.privacy-app > .privacy-lead, .privacy-app > .privacy-read { margin-left: max(0px, calc(50% - min(430px, 50%))); }
.privacy-read { margin-top: 56px; padding-left: 8%; }
.privacy-section { position: relative; padding: var(--space-5) 0 var(--space-2); border-top: 1px solid var(--color-line); }
.privacy-section h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--space-2); color: var(--ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.5; }
/* a colour index tab before each heading (sticky-note tabs in the mood-board keys) */
.privacy-section h2::before { content: ""; flex: none; width: 26px; height: 16px; border-radius: 3px 8px 8px 3px; background: var(--c); }
.privacy-section.c1 { --c: var(--color-key); } .privacy-section.c2 { --c: #9ec39e; } .privacy-section.c3 { --c: #94c7db; } .privacy-section.c4 { --c: #e1aeb3; } .privacy-section.c5 { --c: #b7a8d5; }
.privacy-app p, .privacy-app li { color: var(--ink-2); line-height: 1.85; overflow-wrap: anywhere; }
.privacy-app p { margin: 0 0 var(--space-3); }
.privacy-app ul { margin: 0 0 var(--space-3); padding-left: 1.3em; }
.privacy-app li + li { margin-top: var(--space-1); }
.privacy-app a { color: var(--color-link); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 4px; }
.privacy-app a:hover { text-decoration-color: currentColor; }
.privacy-app a:focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 2px; border-radius: 4px; }
.privacy-contact { display: inline-flex; align-items: center; min-height: 44px; }
/* Sandy waves goodbye at the end */
.privacy-end { position: relative; height: 150px; margin-top: 24px; }
.privacy-end-sandy { width: 130px; right: 14%; top: 0; }
.privacy-end-clover { width: 44px; right: calc(14% + 140px); top: 64px; rotate: -16deg; }

/* narrow desktop and phones: one column, the art under the title */
@media (max-width: 1180px) {
  .privacy-hero { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; padding-top: 16px; }
  .privacy-hero-text { padding-top: 8px; }
  .privacy-hero-art { width: min(100%, 400px); min-height: 290px; margin: 16px 0 0 auto; }
  .privacy-p-sandy { width: 200px; right: 30px; top: 50px; }
  .privacy-p-key { width: 46px; right: 8px; top: 210px; }
  .privacy-p-lock { width: 40px; right: auto; left: 0; top: 200px; }
  .privacy-p-burst { width: 40px; right: 34px; top: 26px; }
}
@media (max-width: 900px) {
  .privacy-title { font-size: 3.25rem; }
  html[lang="en"] .privacy-title { font-size: 2.5rem; }
  .privacy-hero .privacy-promise { margin-top: 28px; }
  .privacy-app .privacy-lead { margin-top: 16px; padding-left: 0; font-size: 1.0625rem; }
  .privacy-read { margin-top: 40px; padding-left: 0; }
  .privacy-end-sandy { right: 8px; }
  .privacy-end-clover { right: 150px; }
}