/* ============================================
   Policy page styles — append to existing styles.css
   Uses the same design tokens already defined in
   your site's :root (--ink, --terracotta, --terracotta-dark,
   --parchment-2). Falls back gracefully if a variable
   isn't found, so this is safe to drop in as-is.
   ============================================ */

.policy-main{
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  color: var(--ink, #3A2A20);
  line-height: 1.7;
  font-size: 16px;
}

.policy-main h1{
  font-family: inherit;
  font-size: 32px;
  color: var(--terracotta-dark, #8a3418);
  margin-bottom: 8px;
}

.policy-main .policy-updated{
  font-size: 13px;
  color: #7a6a55;
  margin-bottom: 32px;
  font-style: italic;
}

.policy-main h2{
  font-size: 20px;
  color: var(--ink, #3A2A20);
  margin-top: 32px;
  margin-bottom: 10px;
  border-bottom: 1px solid #DDC9A3;
  padding-bottom: 6px;
}

.policy-main p{
  margin-bottom: 16px;
}

.policy-main a{
  color: var(--terracotta-dark, #8a3418);
  font-weight: 600;
  text-decoration: none;
}

.policy-main a:hover{
  text-decoration: underline;
}

.policy-main ul{
  margin: 0 0 16px 20px;
}

.policy-main li{
  margin-bottom: 8px;
}

.policy-callout{
  background: var(--parchment-2, #F6EDDD);
  border: 1px solid #DDC9A3;
  border-radius: 6px;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 15px;
}

.policy-nav-links{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #DDC9A3;
  font-size: 14px;
}