/* KK Article Styles v0.4 — aligned to live site; Merriweather headings, Nunito body, Poppins UI */
/* This was created for the pages created with: article-template.php
:root{
  --kk-kk-sand-beige: #E9D0B1; /* KK Sand Beige */
}

:root{
  --kk-font-h: "Merriweather", Georgia, "Times New Roman", serif;
  --kk-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --kk-font-ui: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --kk-border-color: rgba(0,0,0,.25);
  --kk-radius: 1rem;
  --kk-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.08);
  --kk-bevel-light: rgba(255,255,255,.85);
  --kk-bevel-dark: rgba(0,0,0,.22);
  --kk-maxw: 960px;
  --kk-gap: 1rem;

  --kk-bg-1: #daedf5;
  --kk-bg-2: #e6f4ed;
  --kk-accent: var(--kk-purple, #856BA8);
  --kk-accent-strong: var(--kk-purple-dark, #5A4478);
}

.kk-article{
  container-type: inline-size;
  max-width: var(--kk-maxw);
  margin: 0 auto;
  padding: 0 1rem 3rem;
  color: var(--kk-text, #323232);
  font-family: var(--kk-font-body);
  line-height: 1.6;
  font-size: clamp(16px, 1.1vw + 0.6rem, 18px);
}

.kk-article h1,.kk-h1{font-family:var(--kk-font-h);font-weight:700;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.15;margin:1.6rem 0 .75rem;color:#48291A;}
.kk-article h2,.kk-h2{font-family:var(--kk-font-h);font-weight:600;font-size:clamp(1.35rem,2.2vw,1.7rem);margin:1.25rem 0 .6rem;color:var(--kk-accent-strong);}
.kk-article h3,.kk-h3{font-family:var(--kk-font-h);font-weight:600;font-size:clamp(1.1rem,1.6vw,1.3rem);margin:1rem 0 .4rem;color:#48697F;}

.kk-article p{margin:.75rem 0;}
.kk-article p.lead{font-size:1.06em;color:var(--kk-muted,#4b4b4b);}
.kk-article a{color:var(--kk-accent);text-decoration:none;border-bottom:1px solid rgba(133,107,168,.35);transition:color .15s,border-color .15s,background-color .15s;}
.kk-article a:hover,.kk-article a:focus{color:var(--kk-accent-strong);border-color:rgba(90,68,120,.5);}
.kk-article a:focus-visible{outline:3px solid #59B0D4;outline-offset:2px;border-bottom-color:transparent;}

hr.kk-divider{height:10px;border:0;margin:2rem 0;background:linear-gradient(to right,rgba(0,0,0,.06),rgba(0,0,0,.18),rgba(0,0,0,.06));border-radius:999px;}

.kk-center{text-align:center;}
.kk-center > *{margin-left:auto;margin-right:auto;}

.kk-media{display:grid;gap:var(--kk-gap);align-items:start;margin:1.25rem 0;}
.kk-media .kk-media-img img{width:100%;height:auto;display:block;border-radius:var(--kk-radius);box-shadow:var(--kk-shadow);}
.kk-media .kk-cell{border-radius:var(--kk-radius);padding:1rem;}
.kk-media.left{grid-template-columns:minmax(220px,40%) 1fr;}
.kk-media.left .kk-media-img{order:1;}
.kk-media.left .kk-cell{order:2;}
.kk-media.right{grid-template-columns:1fr minmax(220px,40%);}
.kk-media.right .kk-cell{order:1;}
.kk-media.right .kk-media-img{order:2;}
@media (max-width:800px){.kk-media.left,.kk-media.right{grid-template-columns:1fr;}}
.kk-cell.bg-0{background:transparent;}
.kk-cell.bg-1{background:var(--kk-bg-1);}
.kk-cell.bg-2{background:var(--kk-bg-2);}
.kk-cell.border{border:1px solid var(--kk-border-color);}
.kk-cell.bevel{box-shadow:inset 1px 1px 0 var(--kk-bevel-light), inset -1px -1px 0 var(--kk-bevel-dark);}

blockquote.kk-quote{margin:1.25rem 0;padding:1rem 1.25rem;background:#f9f7fb;border:1px solid rgba(0,0,0,.12);border-left:6px solid var(--kk-accent);border-radius:var(--kk-radius);box-shadow:inset 1px 1px 0 var(--kk-bevel-light), inset -1px -1px 0 var(--kk-bevel-dark);color:#3c3051;font-style:italic;}
blockquote.kk-quote cite{display:block;margin-top:.5rem;color:var(--kk-muted);font-style:normal;font-size:.95rem;}

.kk-card{border-radius:var(--kk-radius);box-shadow:var(--kk-shadow);padding:1rem;}
.kk-card.bg-0{background:transparent;box-shadow:none;}
.kk-card.bg-1{background:var(--kk-bg-1);}
.kk-card.bg-2{background:var(--kk-bg-2);}
.kk-card.border{border:1px solid var(--kk-border-color);}
.kk-card.bevel{box-shadow:inset 1px 1px 0 var(--kk-bevel-light), inset -1px -1px 0 var(--kk-bevel-dark);}

.kk-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--kk-font-ui);font-weight:600;padding:.55rem .9rem;border-radius:.7rem;text-decoration:none;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;}
.kk-btn.primary{background:var(--kk-accent);color:#fff;border-color:var(--kk-accent);}
.kk-btn.primary:hover{background:var(--kk-accent-strong);border-color:var(--kk-accent-strong);}
.kk-btn.ghost{background:transparent;color:var(--kk-accent-strong);border-color:var(--kk-accent-strong);}
.kk-btn.ghost:hover{background:rgba(90,68,120,.06);}

.kk-img{display:inline-block;max-width:100%;border-radius:var(--kk-radius);}
.kk-img img{display:block;width:100%;height:auto;border-radius:inherit;}
.kk-img.size-lg{max-width:1200px;}
.kk-img.size-md{max-width:800px;}
.kk-thumb{width:150px;height:150px;display:inline-block;border-radius:12px;overflow:hidden;background:transparent;position:relative;}
.kk-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;}
.kk-bv-1{border:1px solid var(--kk-accent);box-shadow:inset 1px 1px 0 var(--kk-bevel-light), inset -1px -1px 0 var(--kk-bevel-dark);}
.kk-bv-2{border:2px solid var(--kk-accent);box-shadow:inset 1px 1px 0 var(--kk-bevel-light), inset -1px -1px 0 var(--kk-bevel-dark);}
.kk-bv-3{border:3px solid var(--kk-accent);box-shadow:inset 1px 1px 0 var(--kk-bevel-light), inset -1px -1px 0 var(--kk-bevel-dark);}

.kk-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.kk-embed{position:relative;width:100%;padding-top:56.25%;border-radius:var(--kk-radius);overflow:hidden;box-shadow:var(--kk-shadow);}
.kk-embed > iframe,.kk-embed > video{position:absolute;inset:0;width:100%;height:100%;border:0;}
.kk-toc{border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:1rem;background:#fff;box-shadow:var(--kk-shadow);}
.kk-toc h2{margin-top:0;font-size:1.05rem;color:var(--kk-accent-strong);}
.kk-toc nav a{display:block;padding:.25rem 0;text-decoration:none;border-bottom:0;}
.kk-gallery{display:grid;gap:.75rem;grid-template-columns:repeat(3, 1fr);}
@media (max-width:900px){.kk-gallery{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:560px){.kk-gallery{grid-template-columns:1fr;}}