/* ==========================================================
   blog.css  ::  blog only styles
   Loads AFTER site.css and inherits its tokens, nav, buttons,
   and footer. Everything here uses the same variables, radii,
   type scale, and shadows as the rest of havenkept.com.
   ========================================================== */

/* ----------------------------------------------------------
   IMPORTANT: site.css styles the bare `nav` element as the
   sticky site header. The blog also uses <nav> for breadcrumbs
   and the table of contents, which is the correct accessible
   markup, so those must opt out of the header styling or they
   stick to the top of the viewport and cover the real header.
   ---------------------------------------------------------- */
.hk-crumbs,
.hk-toc {
  position: static;
  top: auto;
  z-index: auto;
  backdrop-filter: none;
  border-bottom: none;
}
.hk-crumbs::after,
.hk-toc::after { content: none; display: none; }
.hk-crumbs { background: transparent; }

/* Current page marker in the site nav */
.nav-links a.is-current { opacity: 1; color: var(--plum); }
.nav-links a.is-current::after { width: 100%; }

.hk-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--plum); color: var(--ivory);
  padding: 10px 18px; border-radius: 0 0 9px 0; z-index: 100;
  font-size: 14px; font-weight: 600;
}
.hk-skip:focus { left: 0; }

/* ---------- Blog index ---------- */
.hk-blog-hero { padding: 68px 0 34px; text-align: center; }
.hk-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--rosegold); margin-bottom: 14px;
}
.hk-blog-title {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 44px; line-height: 1.14;
  color: var(--plum); letter-spacing: -0.5px; margin-bottom: 16px;
}
.hk-blog-tagline { font-size: 17px; color: var(--muted); max-width: 56ch; margin: 0 auto; line-height: 1.6; }

.hk-cat-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  list-style: none; margin: 0 0 48px;
}
.hk-cat-nav a {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--muted); background: #fff;
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 18px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.hk-cat-nav a:hover { color: var(--plum); border-color: var(--heather); }
.hk-cat-nav a.is-active { color: var(--ivory); background: var(--plum); border-color: var(--plum); }

.hk-featured {
  display: grid; grid-template-columns: 1.05fr .95fr;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; margin-bottom: 44px;
  box-shadow: 0 4px 14px rgba(61,42,74,0.06);
}
.hk-featured-img { background: #F3EFE7; min-height: 260px; }
.hk-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.hk-featured-body { padding: 40px; align-self: center; }
.hk-featured-body h2 {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 30px; line-height: 1.2;
  color: var(--plum); margin: 0 0 12px;
}
.hk-featured-body h2 a:hover { color: var(--rosegold); }
.hk-featured-body p { color: var(--muted); font-size: 15.5px; margin: 0 0 24px; }
@media (max-width: 860px) {
  .hk-featured { grid-template-columns: 1fr; }
  .hk-featured-body { padding: 28px 24px; }
  .hk-featured-body h2 { font-size: 25px; }
}

.hk-post-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 28px; padding: 0 0 10px;
}
@media (max-width: 640px) { .hk-post-grid { grid-template-columns: 1fr; } }

.hk-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.hk-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(61,42,74,0.22); }
.hk-card-img { display: block; aspect-ratio: 16 / 9; background: #F3EFE7; }
.hk-card-img img { width: 100%; height: 100%; object-fit: cover; }
.hk-card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.hk-card h2 {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 20px; line-height: 1.25;
  color: var(--plum); margin: 0 0 10px;
}
.hk-card h2 a:hover { color: var(--rosegold); }
.hk-card p { color: var(--muted); font-size: 14.5px; margin: 0 0 20px; }
.hk-card-meta { margin-top: auto; font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; }

.hk-pill {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--plum); background: #F3EFE7;
  border-radius: 9px; padding: 6px 13px; margin-bottom: 14px;
}
.hk-pill:hover { background: var(--heather); color: var(--ivory); }

.hk-empty { text-align: center; color: var(--muted); padding: 50px 0 30px; font-size: 16px; }

/* ---------- Post ---------- */
.hk-crumbs {
  font-size: 12.5px; color: var(--muted); padding: 30px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.hk-crumbs a:hover { color: var(--plum); }

.hk-post-head { padding: 26px 0 32px; }
.hk-post-title {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 42px; line-height: 1.14;
  color: var(--plum); letter-spacing: -0.5px; margin: 0 0 16px;
}
.hk-post-lede { font-size: 18px; color: var(--muted); line-height: 1.6; margin: 0 0 20px; }
.hk-post-meta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.hk-updated { color: var(--rosegold); }
@media (max-width: 640px) { .hk-post-title { font-size: 31px; } .hk-post-lede { font-size: 16px; } }

.hk-hero-figure { margin: 0 0 42px; }
.hk-hero-figure img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 14px; }
.hk-hero-figure figcaption { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 10px; }

.hk-toc {
  background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--rosegold);
  padding: 22px 26px; margin: 0 0 40px;
}
.hk-toc h2 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; font-family: 'Inter', sans-serif;
}
.hk-toc ol { margin: 0; padding-left: 20px; }
.hk-toc li { margin: 7px 0; font-size: 14.5px; color: var(--muted); }
.hk-toc a { color: var(--plum); }
.hk-toc a:hover { color: var(--rosegold); }

/* ---------- Prose ---------- */
.hk-prose { font-size: 17px; line-height: 1.75; color: var(--charcoal); }
.hk-prose > *:first-child { margin-top: 0; }
.hk-prose p { margin: 0 0 1.35em; }
.hk-prose a { color: var(--plum); text-decoration: underline; text-decoration-color: var(--heather); text-underline-offset: 3px; }
.hk-prose a:hover { color: var(--rosegold); text-decoration-color: var(--rosegold); }
.hk-prose h2 {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 29px; line-height: 1.2;
  color: var(--plum); margin: 2em 0 .6em; scroll-margin-top: 96px;
}
.hk-prose h3 {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 21px;
  color: var(--charcoal); margin: 1.8em 0 .5em; scroll-margin-top: 96px;
}
.hk-prose h4 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; color: var(--charcoal); margin: 1.5em 0 .4em; }
.hk-prose ul, .hk-prose ol { margin: 0 0 1.35em; padding-left: 24px; }
.hk-prose li { margin: .5em 0; }
.hk-prose li::marker { color: var(--heather); }
.hk-prose strong { font-weight: 600; color: var(--plum); }
.hk-prose img { border-radius: 14px; margin: 1.8em 0; }
.hk-prose figure { margin: 1.8em 0; }
.hk-prose figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 8px; }
.hk-prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.6em 0; }

.hk-prose blockquote {
  margin: 1.9em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--heather);
  font-family: 'Fraunces', serif; font-weight: 400; font-size: 20px;
  line-height: 1.5; color: var(--plum);
}
.hk-prose blockquote p:last-child { margin-bottom: 0; }

.hk-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; background: #F3EFE7; padding: 2px 6px; border-radius: 6px;
}
.hk-prose pre {
  background: var(--plum); color: #F3EDF6; padding: 22px 24px;
  border-radius: 14px; overflow-x: auto; margin: 1.7em 0;
}
.hk-prose pre code { background: none; color: inherit; padding: 0; font-size: 14px; }

.hk-prose table { width: 100%; border-collapse: collapse; margin: 1.9em 0; font-size: 15px; }
.hk-prose th, .hk-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.hk-prose thead th {
  background: #F3EFE7; color: var(--plum); font-weight: 600;
  font-size: 12.5px; letter-spacing: 0.4px; text-transform: uppercase;
}

.hk-callout {
  background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--rosegold);
  padding: 20px 24px; margin: 1.9em 0;
}
.hk-callout p:last-child { margin-bottom: 0; }

/* ---------- Tags, opt-in, related ---------- */
.hk-tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 48px 0 0; list-style: none; }
.hk-tags li a {
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--muted); background: #fff;
  border: 1px solid var(--border); border-radius: 9px; padding: 7px 14px;
  display: inline-block;
}
.hk-tags li a:hover { color: var(--plum); border-color: var(--heather); }

.hk-optin {
  background: var(--plum); color: var(--ivory);
  border-radius: 14px; padding: 48px 44px; margin: 56px 0; text-align: center;
}
.hk-optin-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--heather); margin-bottom: 14px;
}
.hk-optin-title {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 30px; line-height: 1.2;
  color: var(--ivory); margin-bottom: 14px;
}
.hk-optin-text { color: #E4DCE9; font-size: 15.5px; line-height: 1.6; margin: 0 auto 28px; max-width: 52ch; }
.hk-optin .btn-primary { background: var(--rosegold); color: #fff; }
.hk-optin .btn-primary:hover { background: var(--ivory); color: var(--plum); box-shadow: 0 8px 22px rgba(0,0,0,0.2); }
.hk-optin-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hk-optin-form input[type="email"] {
  font-family: 'Inter', sans-serif; font-size: 15px; padding: 12px 18px;
  border: 1px solid transparent; border-radius: 9px; min-width: 280px; color: var(--charcoal);
}
.hk-optin-fine { font-size: 12px; color: var(--heather); margin: 18px 0 0; }

/* The mid post block is injected INSIDE .hk-prose, which styles its own h2, a
   and p. Those descendant rules are more specific than the bare .hk-optin-*
   classes, so the card's title was painting plum on plum and the button was
   picking up body link styling. Restate them scoped to .hk-optin, which wins.
   If .hk-prose ever gains a rule for an element this card contains, add it here
   too, or the card will silently inherit article styling again. */
.hk-optin .hk-optin-title { color: var(--ivory); font-family: 'Fraunces', serif; }
.hk-optin .hk-optin-text { color: #E4DCE9; }
.hk-optin .hk-optin-eyebrow { color: var(--rosegold); }
.hk-optin .hk-optin-fine { color: var(--heather); }
.hk-optin .btn, .hk-optin .btn:hover { text-decoration: none; }

/* Mid post variant. Not a smaller copy of the footer CTA, which read as the
   article ending twice. This is a horizontal aside: words left, button right,
   short enough to step over if you are mid paragraph.
   The margin resets below are load bearing. .hk-prose gives h2 a large top
   margin and p a bottom margin, and both apply inside this card, which left a
   dead band across the top of it. */
.hk-optin-mid {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  text-align: left; margin: 40px 0; padding: 24px 28px;
}
.hk-optin-mid .hk-optin-copy { flex: 1 1 260px; }
.hk-optin-mid .hk-optin-title {
  font-size: 19px; line-height: 1.3; margin: 0 0 5px;
}
.hk-optin-mid .hk-optin-text {
  font-size: 14px; line-height: 1.55; margin: 0; max-width: 48ch;
}
.hk-optin-mid .btn-lg { flex: 0 0 auto; font-size: 14px; padding: 11px 22px; }
@media (max-width: 560px) {
  .hk-optin-mid { display: block; padding: 22px 20px; }
  .hk-optin-mid .hk-optin-text { margin-bottom: 16px; }
}
@media (max-width: 560px) { .hk-optin { padding: 34px 22px; } .hk-optin-title { font-size: 24px; } }

.hk-related { margin: 56px 0 0; }
.hk-related h2 {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 24px;
  color: var(--plum); margin-bottom: 22px;
}
.hk-related-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; list-style: none;
}
.hk-related-list li { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; }
.hk-related-list a { font-family: 'Fraunces', serif; font-size: 18px; color: var(--plum); line-height: 1.3; }
.hk-related-list a:hover { color: var(--rosegold); }
.hk-related-list span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 8px; }

.hk-back { margin: 48px 0 80px; font-size: 14px; }
.hk-back a { color: var(--plum); font-weight: 600; }
.hk-back a:hover { color: var(--rosegold); }

/* Neutralise the site's default section padding inside the blog */
body.hk-body-index section,
body.hk-body-post section { padding: 0; }

/* Narrow reading column, using the site wrap padding */
.hk-wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 28px; }

@media print {
  nav, footer, .hk-optin, .hk-related, .hk-crumbs, .hk-back, .hk-toc { display: none; }
  body { background: #fff; font-size: 12pt; }
}