/* ============================================================
   KEENLY.ORG — BLOG SKIN
   Drop this file into any CMS (WordPress, Ghost, Webflow,
   Squarespace, etc.) alongside the Google Fonts import below.
   All tokens are CSS custom properties so you can override
   them per-theme with a single :root block.
   ============================================================ */

/* ── 0. GOOGLE FONTS ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,300;1,900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,900&display=swap');

/* ── 1. DESIGN TOKENS ────────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --k-teal:        #1b8b99;
  --k-teal-light:  #83b7be;
  --k-lime:        #8ec13f;
  --k-red:         #e75325;
  --k-charcoal:    #212528;
  --k-ink:         #0e1012;
  --k-offwhite:    #f4f1eb;
  --k-white:       #ffffff;

  /* Semantic aliases */
  --k-bg-dark:     var(--k-ink);
  --k-bg-mid:      var(--k-charcoal);
  --k-bg-light:    var(--k-offwhite);
  --k-accent:      var(--k-teal);
  --k-accent-2:    var(--k-lime);

  /* Typography */
  --k-font-serif:  'Merriweather', Georgia, serif;
  --k-font-sans:   'Raleway', system-ui, sans-serif;

  /* Type scale */
  --k-text-xs:     10px;
  --k-text-sm:     13px;
  --k-text-base:   16px;
  --k-text-md:     17px;
  --k-text-lg:     22px;
  --k-text-xl:     clamp(24px, 3vw, 36px);
  --k-text-2xl:    clamp(32px, 4.5vw, 52px);
  --k-text-3xl:    clamp(40px, 6.5vw, 80px);
  --k-text-hero:   clamp(52px, 9vw, 120px);

  /* Spacing */
  --k-space-xs:    12px;
  --k-space-sm:    20px;
  --k-space-md:    32px;
  --k-space-lg:    48px;
  --k-space-xl:    80px;
  --k-space-2xl:   120px;

  /* Border radius */
  --k-radius-sm:   2px;
  --k-radius-md:   4px;
  --k-radius-lg:   8px;

  /* Transitions */
  --k-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --k-transition:  0.3s var(--k-ease);
}

/* ── 2. BASE RESET ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img, video { max-width: 100%; height: auto; display: block; }

/* ── 3. BLOG WRAPPER ─────────────────────────────────────────────────────── */
/* Wrap your entire blog/post content in .k-blog */
.k-blog {
  font-family: var(--k-font-sans);
  color: var(--k-ink);
  background: var(--k-white);
  -webkit-font-smoothing: antialiased;
}

/* ── 4. BLOG INDEX — POST LISTING ────────────────────────────────────────── */

/* Grid of post cards */
.k-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Single post card */
.k-post-card {
  display: flex;
  flex-direction: column;
  background: var(--k-white);
  border: 1px solid rgba(0,0,0,0.07);
  transition: transform var(--k-transition),
              box-shadow var(--k-transition);
  text-decoration: none;
  color: inherit;
}
.k-post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 80px rgba(0,0,0,0.12);
}

/* Featured image inside a card */
.k-post-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Card body */
.k-post-card__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.k-post-card__eyebrow {
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: var(--k-text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--k-teal);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.k-post-card__eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--k-teal);
  flex-shrink: 0;
}

.k-post-card__title {
  font-family: var(--k-font-serif);
  font-weight: 900;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--k-ink);
  margin: 0 0 12px;
}

.k-post-card__excerpt {
  font-family: var(--k-font-sans);
  font-size: var(--k-text-base);
  color: rgba(0,0,0,0.45);
  line-height: 1.75;
  margin: 0 0 20px;
  flex: 1;
}

.k-post-card__meta {
  font-family: var(--k-font-sans);
  font-size: var(--k-text-sm);
  color: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.k-post-card__meta-dot { color: rgba(0,0,0,0.2); }

/* Featured / hero post card (full width, horizontal layout) */
.k-post-card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
}
.k-post-card--featured .k-post-card__image {
  width: 50%;
  aspect-ratio: unset;
  flex-shrink: 0;
}
.k-post-card--featured .k-post-card__body {
  padding: 48px;
  justify-content: center;
}
.k-post-card--featured .k-post-card__title {
  font-size: clamp(28px, 3.5vw, 44px);
  margin-bottom: 20px;
}

/* ── 5. SINGLE POST — HERO / HEADER ─────────────────────────────────────── */

.k-post-hero {
  background: var(--k-ink);
  padding: clamp(100px, 14vw, 180px) clamp(20px, 5vw, 80px) clamp(60px, 8vw, 100px);
  position: relative;
  overflow: hidden;
}

.k-post-hero__inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.k-post-hero__eyebrow {
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: var(--k-text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--k-lime);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.k-post-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--k-lime);
  flex-shrink: 0;
}

.k-post-hero__title {
  font-family: var(--k-font-serif);
  font-weight: 900;
  font-size: clamp(36px, 6vw, 80px);
  color: var(--k-white);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
}

.k-post-hero__subtitle {
  font-family: var(--k-font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2.2vw, 26px);
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
  margin: 0 0 40px;
  max-width: 600px;
}

.k-post-hero__meta {
  font-family: var(--k-font-sans);
  font-size: var(--k-text-sm);
  color: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.k-post-hero__meta-dot { color: rgba(255,255,255,0.2); }

/* ── 6. FEATURED IMAGE (below hero, full-bleed) ─────────────────────────── */
.k-post-featured-image {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* ── 7. POST BODY — PROSE STYLES ─────────────────────────────────────────── */
/* Apply .k-post-body to the div that wraps your CMS-rendered HTML */

.k-post-body {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 48px);
  font-family: var(--k-font-serif);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.85;
  color: #2a2a2a;
}

.k-post-body h1,
.k-post-body h2,
.k-post-body h3,
.k-post-body h4,
.k-post-body h5,
.k-post-body h6 {
  font-family: var(--k-font-serif);
  font-weight: 900;
  color: var(--k-ink);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 2em 0 0.6em;
}

.k-post-body h1 { font-size: clamp(32px, 4vw, 52px); }
.k-post-body h2 { font-size: clamp(26px, 3vw, 40px); }
.k-post-body h3 { font-size: clamp(22px, 2.4vw, 32px); }
.k-post-body h4 { font-size: clamp(18px, 2vw, 24px); font-weight: 700; }
.k-post-body h5 { font-size: var(--k-text-md); font-weight: 700; }
.k-post-body h6 {
  font-family: var(--k-font-sans);
  font-size: var(--k-text-xs);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--k-teal);
}

.k-post-body p { margin: 0 0 1.5em; }

.k-post-body a {
  color: var(--k-teal);
  text-decoration: underline;
  text-decoration-color: rgba(27,139,153,0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--k-transition);
}
.k-post-body a:hover { text-decoration-color: var(--k-teal); }

.k-post-body strong { font-weight: 700; color: var(--k-ink); }
.k-post-body em     { font-style: italic; }

.k-post-body ul,
.k-post-body ol {
  padding-left: 1.5em;
  margin: 0 0 1.5em;
}
.k-post-body li { margin-bottom: 0.4em; }

.k-post-body ul li::marker { color: var(--k-teal); }
.k-post-body ol li::marker {
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: 12px;
  color: var(--k-teal);
}

.k-post-body blockquote {
  border-left: 4px solid var(--k-teal);
  margin: 2em 0;
  padding: 8px 0 8px 32px;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 2.2vw, 26px);
  color: rgba(0,0,0,0.55);
  line-height: 1.6;
}
.k-post-body blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--k-font-sans);
  font-style: normal;
  font-weight: 800;
  font-size: var(--k-text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-teal);
}

.k-post-body figure {
  margin: 2em 0;
}
.k-post-body figure img {
  width: 100%;
  height: auto;
  display: block;
}
.k-post-body figcaption {
  font-family: var(--k-font-sans);
  font-size: var(--k-text-sm);
  color: rgba(0,0,0,0.4);
  margin-top: 10px;
  text-align: center;
  font-style: italic;
}

.k-post-body hr {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin: 3em 0;
}

.k-post-body code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875em;
  background: rgba(27,139,153,0.07);
  color: var(--k-teal);
  padding: 2px 7px;
  border-radius: var(--k-radius-sm);
}
.k-post-body pre {
  background: var(--k-ink);
  color: rgba(255,255,255,0.85);
  padding: 24px 28px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.65;
  margin: 1.5em 0;
}
.k-post-body pre code {
  background: none;
  color: inherit;
  padding: 0;
}

/* Pull quote — add class="k-pull-quote" to a <p> in your CMS */
.k-post-body .k-pull-quote {
  font-family: var(--k-font-serif);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(24px, 3vw, 38px);
  color: var(--k-teal);
  letter-spacing: -0.02em;
  line-height: 1.2;
  border: none;
  padding: 32px 0;
  margin: 2em 0;
  border-top: 2px solid var(--k-teal);
  border-bottom: 2px solid rgba(27,139,153,0.2);
  text-align: center;
}

/* Call-out box — add class="k-callout" to a <div> */
.k-callout {
  background: var(--k-offwhite);
  border-left: 4px solid var(--k-teal);
  padding: 24px 28px;
  margin: 2em 0;
}
.k-callout p:last-child { margin-bottom: 0; }

/* ── 8. AUTHOR BIO ───────────────────────────────────────────────────────── */

.k-author-bio {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 36px 40px;
  background: var(--k-offwhite);
  margin: 40px 0;
}

.k-author-bio__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--k-teal) 0%, var(--k-lime) 100%);
}

.k-author-bio__body {}

.k-author-bio__label {
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: var(--k-text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--k-teal);
  margin-bottom: 4px;
}

.k-author-bio__name {
  font-family: var(--k-font-serif);
  font-weight: 900;
  font-size: 20px;
  color: var(--k-ink);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.k-author-bio__title {
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: var(--k-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.35);
  margin-bottom: 12px;
}

.k-author-bio__text {
  font-family: var(--k-font-sans);
  font-size: var(--k-text-base);
  color: rgba(0,0,0,0.55);
  line-height: 1.75;
  margin: 0;
}

/* ── 9. TAGS / CATEGORIES ────────────────────────────────────────────────── */

.k-tag {
  display: inline-block;
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: var(--k-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 5px 14px;
  border: 1px solid rgba(27,139,153,0.3);
  color: var(--k-teal);
  transition: background var(--k-transition), color var(--k-transition);
}
.k-tag:hover {
  background: var(--k-teal);
  color: var(--k-white);
  border-color: var(--k-teal);
}

.k-tag--filled  { background: var(--k-teal);    color: var(--k-white); border-color: var(--k-teal); }
.k-tag--lime    { border-color: rgba(142,193,63,0.4); color: var(--k-lime); }
.k-tag--dark    { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); }
.k-tag--subtle  { border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.4); }

.k-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── 10. BUTTONS ─────────────────────────────────────────────────────────── */

.kb {
  display: inline-block;
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 40px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.kb:hover { transform: scale(1.03); filter: brightness(1.08); }
.kb-teal       { background: var(--k-teal);    color: var(--k-white); }
.kb-lime       { background: var(--k-lime);    color: var(--k-ink); }
.kb-white      { background: var(--k-white);   color: var(--k-ink); }
.kb-ink        { background: var(--k-ink);     color: var(--k-white); }
.kb-red        { background: var(--k-red);     color: var(--k-white); }
.kb-ghost      { background: transparent; color: var(--k-white);  border: 1px solid rgba(255,255,255,0.5); }
.kb-ghost-teal { background: transparent; color: var(--k-teal);   border: 1px solid var(--k-teal); }
.kb-ghost-lime { background: transparent; color: var(--k-lime);   border: 1px solid var(--k-lime); }

/* ── 11. PAGINATION ──────────────────────────────────────────────────────── */

.k-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 0;
}

.k-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: 12px;
  text-decoration: none;
  color: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,0,0,0.1);
  transition: all var(--k-transition);
}
.k-pagination__item:hover {
  border-color: var(--k-teal);
  color: var(--k-teal);
}
.k-pagination__item--active {
  background: var(--k-teal);
  color: var(--k-white);
  border-color: var(--k-teal);
}
.k-pagination__item--arrow {
  font-size: 16px;
  font-weight: 400;
  color: rgba(0,0,0,0.3);
}

/* ── 12. UTILITY — EYEBROW LABEL ─────────────────────────────────────────── */

.kl,
.k-eyebrow {
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: var(--k-text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.k-eyebrow--teal { color: var(--k-teal); }
.k-eyebrow--lime { color: var(--k-lime); }
.k-eyebrow--muted { color: rgba(0,0,0,0.35); }

/* Eyebrow with decorative line */
.k-eyebrow-line {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: var(--k-text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.k-eyebrow-line::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

/* ── 13. UTILITY — GRADIENT TEXT ─────────────────────────────────────────── */

.k-grad {
  background: linear-gradient(90deg, var(--k-teal) 0%, var(--k-lime) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 14. SIDEBAR ─────────────────────────────────────────────────────────── */

.k-sidebar-widget {
  margin-bottom: 40px;
}

.k-sidebar-widget__title {
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: var(--k-text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--k-teal);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 12px;
}
.k-sidebar-widget__title::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--k-teal);
  flex-shrink: 0;
}

.k-sidebar-post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.k-sidebar-post-list li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.k-sidebar-post-list li:last-child { border-bottom: none; }

.k-sidebar-post-list a {
  font-family: var(--k-font-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--k-ink);
  text-decoration: none;
  line-height: 1.4;
  display: block;
  margin-bottom: 4px;
  transition: color var(--k-transition);
}
.k-sidebar-post-list a:hover { color: var(--k-teal); }

.k-sidebar-post-list .k-sidebar-post-meta {
  font-family: var(--k-font-sans);
  font-size: 11px;
  color: rgba(0,0,0,0.3);
}

/* ── 15. RELATED POSTS ───────────────────────────────────────────────────── */

.k-related-posts {
  background: var(--k-offwhite);
  padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 80px);
}

.k-related-posts__heading {
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: var(--k-text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--k-teal);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.k-related-posts__heading::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--k-teal);
}

.k-related-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* ── 16. DARK MODE VARIANT (opt-in via .k-dark parent) ───────────────────── */

.k-dark {
  background: var(--k-ink);
  color: rgba(255,255,255,0.85);
}
.k-dark .k-post-body {
  color: rgba(255,255,255,0.75);
}
.k-dark .k-post-body h1,
.k-dark .k-post-body h2,
.k-dark .k-post-body h3,
.k-dark .k-post-body h4,
.k-dark .k-post-body strong {
  color: var(--k-white);
}
.k-dark .k-post-body a {
  color: var(--k-teal-light);
  text-decoration-color: rgba(131,183,190,0.35);
}
.k-dark .k-post-body blockquote {
  color: rgba(255,255,255,0.45);
}
.k-dark .k-author-bio {
  background: var(--k-charcoal);
}
.k-dark .k-author-bio__name { color: var(--k-white); }
.k-dark .k-author-bio__text { color: rgba(255,255,255,0.5); }

/* ── 17. RESPONSIVE ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .k-post-grid          { grid-template-columns: 1fr 1fr; }
  .k-related-posts__grid { grid-template-columns: 1fr 1fr; }
  .k-post-card--featured { flex-direction: column; }
  .k-post-card--featured .k-post-card__image { width: 100%; aspect-ratio: 16/9; }
  .k-post-card--featured .k-post-card__body  { padding: 28px; }
}

@media (max-width: 600px) {
  .k-post-grid             { grid-template-columns: 1fr; }
  .k-related-posts__grid   { grid-template-columns: 1fr; }
  .k-author-bio            { flex-direction: column; }
  .k-post-body             { padding: 36px 20px; }
  .kb                      { padding: 16px 28px; width: 100%; text-align: center; }
}