/* BarkLinks content site — brand palette (cream / clay / sage / bark) */
:root {
  --cream-50:#FDFCFA; --cream-100:#F8F6F2; --cream-200:#F0EBE3; --cream-300:#E8E3DA;
  --clay-50:#FBF6F1; --clay-100:#F5EDE4; --clay-200:#EDDCCC; --clay-300:#D4B596;
  --clay-500:#B4805C; --clay-600:#9C6D4B; --clay-700:#84593D;
  --sage-100:#EDF1EA; --sage-500:#7C8E72; --sage-700:#4E5A48;
  --bark-400:#9B9389; --bark-500:#7D756D; --bark-600:#6B6259; --bark-700:#524C46;
  --bark-900:#2D2926;
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:44rem; --wide:68rem;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--body); color:var(--bark-900); background:var(--cream-100);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
a { color:var(--clay-600); text-decoration:none; }
a:hover { color:var(--clay-700); }
img { max-width:100%; display:block; }
h1,h2,h3 { font-family:var(--display); font-weight:600; line-height:1.15; color:var(--bark-900); }
.paw { width:24px; height:24px; }
.paw-sm { width:15px; height:15px; }

/* Nav */
.nav {
  max-width:var(--wide); margin:0 auto; padding:1.25rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand { display:inline-flex; align-items:center; gap:.55rem; color:var(--bark-900); }
.brand .paw { color:var(--clay-500); }
.brand span { font-family:var(--display); font-size:1.35rem; font-weight:700; letter-spacing:-.01em; }
.nav-links { display:flex; gap:1.5rem; }
.nav-links a { color:var(--bark-600); font-size:.95rem; font-weight:500; }
.nav-links a:hover { color:var(--bark-900); }

/* Buttons */
.btn {
  display:inline-block; background:var(--clay-500); color:#fff; font-weight:600;
  padding:.85rem 1.6rem; border-radius:.9rem; box-shadow:0 4px 12px rgba(180,128,92,.25);
  transition:background .15s ease, transform .15s ease;
}
.btn:hover { background:var(--clay-600); color:#fff; transform:translateY(-1px); }

/* Hero */
.hero { max-width:var(--wrap); margin:0 auto; padding:4rem 1.5rem 3rem; text-align:center; }
.eyebrow-pill {
  display:inline-flex; align-items:center; gap:.45rem; color:var(--clay-600);
  background:var(--clay-50); border:1px solid var(--clay-200); border-radius:999px;
  font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:.4rem 1rem; margin-bottom:1.5rem;
}
.eyebrow-pill .paw-sm { color:var(--clay-500); }
.hero-title { font-size:clamp(2.6rem,7vw,4.2rem); font-weight:500; letter-spacing:-.02em; }
.hero-title span { color:var(--clay-500); }
.hero-sub { max-width:34rem; margin:1.6rem auto 2.2rem; font-size:1.12rem; color:var(--bark-500); }

/* Card grid */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr)); gap:1.1rem; }
.card {
  display:flex; flex-direction:column; gap:.4rem; background:#fff; border:1px solid var(--cream-300);
  border-radius:1rem; padding:1.4rem; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(45,41,38,.08); border-color:var(--clay-200); }
.card-cat { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--clay-500); }
.card-title { font-family:var(--display); font-size:1.32rem; font-weight:600; color:var(--bark-900); }
.card-desc { font-size:.92rem; color:var(--bark-500); }

/* Pillar "start here" feature */
.pillar { max-width:var(--wrap); margin:0 auto; padding:0 1.5rem 1rem; }
.pillar-card {
  display:flex; flex-direction:column; gap:.55rem; padding:2rem 2.2rem;
  background:linear-gradient(135deg,var(--clay-500),var(--clay-700)); color:#fff;
  border-radius:1.4rem; box-shadow:0 16px 32px rgba(132,89,61,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.pillar-card:hover { transform:translateY(-3px); box-shadow:0 20px 40px rgba(132,89,61,.32); color:#fff; }
.pillar-eyebrow { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; opacity:.9; }
.pillar-eyebrow .paw-sm { color:#fff; }
.pillar-title { font-family:var(--display); font-size:clamp(1.9rem,4vw,2.5rem); font-weight:700; line-height:1.1; }
.pillar-desc { font-size:1.02rem; opacity:.92; max-width:34rem; }
.pillar-cta { font-weight:700; margin-top:.3rem; }

/* Home category sections */
.home-cats { max-width:var(--wide); margin:0 auto; padding:2rem 1.5rem 1rem; display:flex; flex-direction:column; gap:2.6rem; }
.home-cat .cat-head { margin-bottom:1.1rem; }
.home-cat .cat-head h2 { font-size:1.9rem; }
.home-cat .cat-head p { color:var(--bark-500); margin-top:.15rem; }
.kimi-strip { max-width:var(--wide); margin:0 auto; padding:1rem 1.5rem 3rem; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.3rem; }
.section-head h2 { font-size:2rem; }
.section-head a { font-weight:600; }
.kimi-strip {
  display:flex; align-items:center; gap:1.4rem; background:var(--sage-100);
  border-radius:1.25rem; padding:1.8rem; margin-bottom:4rem; max-width:var(--wrap);
}
.kimi-strip img { width:88px; height:88px; border-radius:999px; object-fit:cover; box-shadow:0 6px 14px rgba(45,41,38,.15); }
.kimi-strip h2 { font-size:1.5rem; }
.kimi-strip p { color:var(--bark-600); margin:.3rem 0 .5rem; font-size:.98rem; }
.kimi-strip a { font-weight:600; }

/* Page heads */
.page-head, .guide-group { max-width:var(--wide); margin:0 auto; padding:0 1.5rem; }
.page-head { padding-top:3rem; padding-bottom:1.5rem; }
.page-head h1 { font-size:clamp(2.4rem,6vw,3.4rem); font-weight:500; }
.page-head p { color:var(--bark-500); font-size:1.08rem; margin-top:.6rem; }
.guides-index { padding-bottom:4rem; }
.guide-group { margin-bottom:2.5rem; }
.guide-group h2 { font-size:1.5rem; margin-bottom:1rem; color:var(--clay-700); }

/* Article */
.article { max-width:var(--wrap); margin:0 auto; padding:2.5rem 1.5rem 4rem; }
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.82rem; color:var(--bark-400); margin-bottom:1.4rem; }
.crumbs a { color:var(--bark-500); font-weight:500; }
.crumbs a:hover { color:var(--clay-600); }
.crumbs span { color:var(--bark-300); }
.crumb-current { color:var(--bark-400); }
.article-head { border-bottom:1px solid var(--cream-300); padding-bottom:1.5rem; margin-bottom:1.5rem; }
.byline a { color:var(--clay-600); font-weight:600; }

/* Author box */
.author-box {
  display:flex; align-items:flex-start; gap:1rem; background:#fff; border:1px solid var(--cream-300);
  border-radius:1rem; padding:1.2rem 1.4rem; margin:2.5rem 0 0;
}
.author-box img { width:64px; height:64px; border-radius:999px; object-fit:cover; flex-shrink:0; box-shadow:0 4px 10px rgba(45,41,38,.12); }
.author-name { font-family:var(--display); font-size:1.2rem; font-weight:700; color:var(--bark-900); margin-bottom:.15rem; }
.author-bio { font-size:.92rem; color:var(--bark-600); line-height:1.55; }
.author-bio a { font-weight:600; white-space:nowrap; }

/* Medical disclaimer */
.disclaimer {
  background:var(--sage-100); border:1px solid var(--sage-200); border-left:4px solid var(--sage-500);
  border-radius:.7rem; padding:.9rem 1.2rem; margin-bottom:2rem; font-size:.9rem; color:var(--sage-700);
}
.disclaimer strong { color:var(--sage-700); }
.eyebrow { font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--clay-500); margin-bottom:.6rem; }
.eyebrow a { color:var(--clay-500); }
.article-head h1 { font-size:clamp(2.2rem,5.5vw,3.2rem); font-weight:600; letter-spacing:-.01em; }
.lede { font-size:1.2rem; color:var(--bark-600); margin-top:1rem; }
.byline { font-size:.85rem; color:var(--bark-400); margin-top:1rem; }

.takeaways { background:var(--clay-50); border:1px solid var(--clay-200); border-radius:1rem; padding:1.3rem 1.5rem; margin-bottom:2rem; }
.takeaways-title { font-weight:700; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; color:var(--clay-600); margin-bottom:.6rem; }
.takeaways ul { padding-left:1.1rem; }
.takeaways li { margin:.3rem 0; color:var(--bark-700); }

.toc { background:#fff; border:1px solid var(--cream-300); border-radius:1rem; padding:1.2rem 1.4rem; margin-bottom:2.5rem; }
.toc-title { font-weight:700; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; color:var(--bark-400); margin-bottom:.5rem; }
.toc ul { list-style:none; display:flex; flex-direction:column; gap:.35rem; }
.toc a { color:var(--bark-600); font-weight:500; }
.toc a:hover { color:var(--clay-600); }

.prose { font-size:1.06rem; color:var(--bark-700); }
.prose section { margin-bottom:2.2rem; }
.prose h2 { font-size:1.85rem; margin-bottom:.8rem; scroll-margin-top:1.5rem; }
.prose h3 { font-size:1.3rem; margin:1.4rem 0 .5rem; }
.prose p { margin:.9rem 0; }
.prose ul, .prose ol { margin:.9rem 0; padding-left:1.4rem; }
.prose li { margin:.45rem 0; }
.prose strong { color:var(--bark-900); }
.prose blockquote { border-left:3px solid var(--clay-300); padding-left:1.1rem; margin:1.2rem 0; color:var(--bark-600); font-style:italic; }

/* Product boxes */
.products { margin:1.4rem 0; }
.products-disclosure { font-size:.83rem; color:var(--bark-400); margin-bottom:1rem; }
.product {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  background:#fff; border:1px solid var(--cream-300); border-radius:1rem; padding:1.2rem 1.4rem; margin:.8rem 0;
}
.product-body { flex:1 1 15rem; }
.product-body h3 { font-family:var(--display); font-size:1.25rem; margin-bottom:.25rem; }
.product-body p { margin:.2rem 0; font-size:.98rem; color:var(--bark-600); }
.product-note { font-size:.85rem !important; color:var(--bark-400) !important; }
.product-cta {
  flex:0 0 auto; background:var(--bark-900); color:#fff; font-weight:600; font-size:.92rem;
  padding:.7rem 1.2rem; border-radius:.8rem; white-space:nowrap; transition:background .15s ease;
}
.product-cta:hover { background:var(--clay-600); color:#fff; }

/* FAQ */
.faq-section { margin-top:2.5rem; }
.faq-section > h2 { font-size:1.85rem; margin-bottom:1rem; }
.faq { border:1px solid var(--cream-300); border-radius:.85rem; background:#fff; margin:.6rem 0; padding:0 1.2rem; }
.faq summary { cursor:pointer; font-weight:600; padding:1rem 0; color:var(--bark-900); list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; float:right; color:var(--clay-500); font-weight:700; }
.faq[open] summary::after { content:"–"; }
.faq-a { padding-bottom:1rem; color:var(--bark-600); }

/* Related */
.related { margin-top:3rem; border-top:1px solid var(--cream-300); padding-top:2rem; }
.related h2 { font-size:1.6rem; margin-bottom:1rem; }

/* Footer */
.site-footer { background:var(--bark-900); color:var(--cream-200); margin-top:3rem; }
.footer-inner { max-width:var(--wide); margin:0 auto; padding:2.5rem 1.5rem; text-align:center; }
.site-footer .brand span { color:var(--cream-50); }
.site-footer .brand .paw { color:var(--clay-300); }
.footer-tag { color:var(--bark-400); max-width:32rem; margin:.8rem auto 1.2rem; font-size:.95rem; }
.footer-links { display:flex; gap:1.4rem; justify-content:center; margin-bottom:1.2rem; }
.footer-links a { color:var(--cream-200); font-weight:500; font-size:.95rem; }
.footer-links a:hover { color:#fff; }
.footer-small { color:var(--bark-500); font-size:.8rem; }

@media (max-width:640px){
  .nav-links { gap:1rem; }
  .kimi-strip { flex-direction:column; text-align:center; }
  .section-head { flex-direction:column; gap:.3rem; align-items:flex-start; }
}