:root {
  --cream: #FAF6F0;
  --warm-white: #FFFDF9;
  --terracotta: #C4603A;
  --terracotta-deep: #A04E2D;
  --terracotta-light: #F0D5C8;
  --sage: #7A9E7E;
  --warm-brown: #5C3D2E;
  --text-dark: #1C1C1E;
  --text-muted: #6B5B4F;
  --hairline: #EBE0D3;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.bg-blob {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(196,96,58,0.10), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(122,158,126,0.10), transparent 65%);
}
.wrap { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 32px 22px 56px; }
.mini-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.logo-circle {
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-deep));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'DM Serif Display', serif; font-size: 1.4rem;
  box-shadow: 0 6px 16px -10px rgba(196,96,58,0.55);
}
.brand-name { font-family: 'DM Serif Display', serif; font-size: 1.3rem; color: var(--warm-brown); }
.kicker {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--terracotta-deep); background: var(--terracotta-light);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;
}
h1 {
  font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 2.6rem); line-height: 1.12;
  color: var(--warm-brown); margin: 0 0 8px; letter-spacing: -0.01em;
}
.subtitle { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 28px; }
.card {
  background: var(--warm-white); border: 1px solid var(--hairline); border-radius: 18px;
  padding: 22px 24px; margin-bottom: 18px;
  box-shadow: 0 1px 0 rgba(92,61,46,0.04), 0 16px 40px -28px rgba(92,61,46,0.18);
}
h2 {
  font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.4rem;
  color: var(--warm-brown); margin: 0 0 8px;
}
h3 {
  font-size: 1.02rem; font-weight: 700; color: var(--warm-brown);
  margin: 18px 0 6px;
}
p, li { font-size: 0.96rem; color: var(--text-dark); }
ul, ol { padding-left: 22px; margin: 6px 0 12px; }
ul li, ol li { margin-bottom: 4px; }
a { color: var(--terracotta-deep); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--terracotta); }
.muted { color: var(--text-muted); font-size: 0.88rem; }
.toc { background: rgba(122,158,126,0.08); border: 1px solid rgba(122,158,126,0.22); }
.toc ol { margin: 0; padding-left: 22px; }
.toc li { font-size: 0.92rem; }
.toc a { color: var(--warm-brown); text-decoration: none; }
.toc a:hover { color: var(--terracotta-deep); text-decoration: underline; }
footer {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hairline);
  text-align: center; font-size: 0.88rem; color: var(--text-muted);
}
.disclaimer {
  background: #FEF3C7; border: 1px solid #F59E0B; border-radius: 12px;
  padding: 14px 16px; margin: 18px 0; font-size: 0.92rem; color: #92400E;
}
.nav-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--terracotta-deep); text-decoration: none; font-weight: 600;
  font-size: 0.92rem; margin-bottom: 12px;
}
.nav-back:hover { color: var(--terracotta); }
.divider {
  height: 1px; background: var(--hairline); margin: 16px -24px;
}