/* ==========================================================================
   HOKU — POLICY PAGES
   Shared styling for trust / privacy / terms / ai / contact.

   These values are not a separate design — they're copied directly from
   splooti.html's own paper/journal aesthetic (the Thread layer), so the
   policy pages read as the same product, not a linked-out legal site.
   If the app's palette changes, this file should change with it.
   Deliberately unminified: this gets edited by hand.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Caveat:wght@400;500;600;700&display=swap');

:root {
  /* Copied from splooti.html's :root — keep these in sync with the app. */
  --paper:    #FBF6E7;
  --paperD:   #F2EBD3;
  --paperX:   #EDE3C7;
  --darkInk:  #1E1A12;
  --inkSoft:  #3A321F;
  --rule:     #C8BC98;
  --accent:   #4A6B3E;
  --gold:     #E8C66A;
  --muted:    #8A8270;
  --red:      #9A3C2A;

  --serif: 'Fraunces', 'Source Serif 4', Georgia, serif;
  --hand:  'Caveat', 'Kalam', cursive;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
  --sans:  'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--darkInk);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---- header ---------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--paperD);
  border-bottom: 1px solid var(--rule);
  padding-top: env(safe-area-inset-top);
}
.top-inner {
  max-width: 760px; margin: auto; padding: 14px 22px;
  display: flex; align-items: center; gap: 18px;
}
.back {
  text-decoration: none; font-family: var(--serif); font-style: italic;
  font-size: 14px; font-weight: 500; color: var(--accent);
}
.back:hover { text-decoration: underline; }
.brand {
  margin-left: auto; text-decoration: none; font-family: var(--hand);
  font-size: 22px; font-weight: 600; color: var(--darkInk); line-height: 1;
}

/* ---- document body ----------------------------------------------------- */
.wrap { max-width: 660px; margin: 0 auto; padding: 40px 22px 20px; }

.eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.4px; color: var(--accent); margin-bottom: 12px;
}
.title {
  font-family: var(--serif); font-size: clamp(30px, 6vw, 40px); font-weight: 500;
  line-height: 1.14; letter-spacing: -0.3px; margin: 0 0 10px; color: var(--darkInk);
}
.date {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.3px;
  color: var(--muted); margin-bottom: 20px;
}
.lede {
  font-family: var(--serif); font-size: 19px; font-style: italic; line-height: 1.55;
  color: var(--inkSoft); margin: 0 0 28px;
}
.notice {
  background: var(--paperX); border: 1px solid var(--rule); border-left: 3px solid var(--gold);
  border-radius: 4px; padding: 14px 16px; font-family: var(--sans); font-size: 13.5px;
  line-height: 1.6; color: var(--inkSoft); margin-bottom: 32px;
}
.section { border-top: 1px solid var(--rule); padding-top: 22px; margin-bottom: 26px; }
.section h2 {
  font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.3;
  margin: 0 0 12px; color: var(--darkInk);
}
.section-body p {
  font-family: var(--serif); font-size: 16.5px; line-height: 1.7;
  margin: 0 0 13px; color: var(--inkSoft);
}
.section-body p:last-child { margin-bottom: 0; }
.section-body ul { margin: 0 0 13px; padding-left: 20px; }
.section-body li {
  font-family: var(--serif); font-size: 16px; line-height: 1.65;
  margin-bottom: 8px; color: var(--inkSoft);
}
.section-body a { color: var(--accent); font-weight: 600; }
.section-body strong { font-weight: 700; color: var(--darkInk); }

.callout {
  background: var(--paperD); border: 1px solid var(--rule); border-left: 3px solid var(--red);
  border-radius: 4px; padding: 14px 16px; margin: 14px 0;
}
.callout > strong {
  display: block; font-family: var(--serif); font-size: 15px; font-weight: 600;
  color: var(--darkInk); margin-bottom: 6px;
}
.callout p { font-family: var(--serif); font-size: 15.5px; line-height: 1.6; margin: 0; }

.contact-card {
  background: var(--paperD); border: 1px solid var(--rule); border-radius: 8px;
  padding: 16px 18px; margin-top: 10px;
}
.contact-card h3 {
  font-family: var(--serif); font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--darkInk);
}
.footer-note { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ---- trust hub ----------------------------------------------------------- */
.hub-list { border-top: 1px solid var(--rule); margin-top: 8px; }
.hub-link {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
  padding: 20px 2px; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--darkInk); transition: background 0.12s;
}
.hub-link:hover { background: var(--paperD); }
.hub-link-title { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; margin-bottom: 3px; }
.hub-link-desc { display: block; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--muted); font-weight: 500; }
.hub-chevron { color: var(--accent); font-size: 22px; font-weight: 700; }
.hub-entity { margin-top: 26px; font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--muted); }

/* ---- footer -------------------------------------------------------------- */
.foot { max-width: 660px; margin: 30px auto 0; padding: 24px 22px 44px; border-top: 1px solid var(--rule); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
.foot-nav a { color: var(--accent); text-decoration: none; font-family: var(--sans); font-size: 13.5px; font-weight: 600; }
.foot-nav a:hover { text-decoration: underline; }
.foot-entity { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--muted); }

@media print { .top, .foot-nav { display: none; } body { background: #fff; } }