/* ============================================================
   Knitkeep Blog — shared stylesheet
   Reuses the same design tokens as the main site (knitkeep-site/index.html)
   so the blog feels like one continuous site, not a bolt-on.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=DM+Sans:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  /* ---------- Brand primitives ---------- */
  --cream:        #FAF6F1;
  --terracotta:   #C17B5A;
  --terracotta-d: #A6633F;
  --brown:        #5C3D2E;
  --muted:        #9B7E6E;

  --cream-50:  #FFFDFB;
  --cream-100: #FAF6F1;
  --cream-200: #F3ECE3;
  --cream-300: #EADFD2;
  --cream-400: #DEC9B6;
  --cream-500: #C9AE97;

  --clay-50:  #FBF0E9;
  --clay-100: #F2D9C9;
  --clay-200: #E6BCA2;
  --clay-300: #D69C79;
  --clay-400: #C17B5A;
  --clay-500: #A6633F;
  --clay-600: #8A4F30;
  --clay-700: #6E3E26;

  --ink-900: #3D2719;
  --ink-800: #5C3D2E;
  --ink-600: #7A5A48;
  --ink-500: #9B7E6E;
  --ink-400: #B7A092;
  --ink-300: #D2C2B6;

  --sage:      #8DA383;
  --sage-deep: #6E8567;
  --sage-wash: #E8EFE3;
  --rose:      #C98B8B;
  --rose-wash: #F6E7E5;
  --mustard:   #D4A857;
  --mustard-wash:#F7EBD2;
  --denim:     #7C93A6;
  --denim-wash:#E5EBF0;

  --bg-page:        var(--cream-100);
  --surface-card:   var(--cream-50);
  --surface-raised: #FFFFFF;

  --text-heading:   var(--ink-900);
  --text-body:      var(--ink-800);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-on-clay:   #FFF9F4;
  --text-link:      var(--clay-500);

  --border-soft:    var(--cream-300);
  --border-default: var(--cream-400);
  --border-strong:  var(--cream-500);

  --accent:         var(--clay-400);
  --accent-hover:   var(--clay-500);
  --accent-press:   var(--clay-600);
  --accent-wash:    var(--clay-50);

  --font-serif: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-sans:  "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);
  --fraunces-soft: "SOFT" 60, "WONK" 0, "opsz" 40;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-caps:   0.12em;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-12: 6rem;

  --container-max: 1120px;
  --content-max:   680px;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  30px;
  --radius-pill: 999px;

  --shadow-xs:  0 1px 2px rgba(92, 61, 46, 0.06);
  --shadow-sm:  0 2px 6px rgba(92, 61, 46, 0.07);
  --shadow-md:  0 6px 18px rgba(92, 61, 46, 0.09);
  --shadow-lg:  0 14px 34px rgba(92, 61, 46, 0.12);
  --shadow-clay: 0 6px 16px rgba(166, 99, 63, 0.28);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  font-variation-settings: var(--fraunces-soft);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--space-6);
}
@media (max-width: 640px) { .wrap { padding-inline: var(--space-5); } }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
}
.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  font-weight: var(--fw-light);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: var(--radius-lg);
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .12s ease, filter .15s ease, background .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent); color: var(--text-on-clay); box-shadow: var(--shadow-clay); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: var(--surface-raised); color: var(--text-body); border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.btn--secondary:hover { background: var(--cream-50); border-color: var(--border-strong); }
.btn--sm { font-size: 14px; padding: 9px 18px; border-radius: var(--radius-md); }
.btn--md { font-size: 15px; padding: 12px 22px; }

/* ============================================================
   NAV (shared with main site)
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 241, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.nav__inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.brand__mark { width: 38px; height: 38px; border-radius: 11px; display: block; }
.brand__word {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-soft);
  font-weight: var(--fw-semibold);
  font-size: 25px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.brand__word b { color: var(--clay-400); font-weight: var(--fw-semibold); }
.nav__links { display: flex; align-items: center; gap: var(--space-7); }
.nav__links a { color: var(--text-body); font-size: 15px; font-weight: var(--fw-regular); }
.nav__links a:hover { color: var(--accent-hover); text-decoration: none; }
.nav__links a.is-active { color: var(--accent-hover); font-weight: var(--fw-medium); }
.nav__right { display: flex; align-items: center; gap: var(--space-5); }
@media (max-width: 760px) { .nav__links { display: none; } }

/* ============================================================
   BLOG HEADER
   ============================================================ */
.blog-header { padding-block: var(--space-10) var(--space-8); text-align: center; }
.blog-header h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); margin: 0 0 var(--space-4); }
.blog-header .lead { max-width: 52ch; margin: 0 auto; }

.breadcrumb {
  font-size: var(--text-sm);
  color: var(--text-faint);
  margin-bottom: var(--space-6);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent-hover); }

/* ============================================================
   CATEGORY GRID (blog hub)
   ============================================================ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-12);
}
@media (max-width: 860px) { .category-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

.category-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-7) var(--space-6);
  transition: transform .18s ease, box-shadow .18s ease;
}
.category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.category-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.category-card h2 { font-size: var(--text-xl); margin: 0; }
.category-card p { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--fw-light); line-height: var(--leading-relaxed); }
.category-card .btn { margin-top: auto; align-self: flex-start; }

.ic-clay  { background: var(--clay-50);    color: var(--clay-500); }
.ic-sage  { background: var(--sage-wash);  color: var(--sage-deep); }
.ic-denim { background: var(--denim-wash); color: var(--denim); }

/* ============================================================
   POST GRID / POST CARD (category pages)
   ============================================================ */
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-4) var(--space-12);
}
@media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.post-card__meta { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.post-card h3 { font-size: var(--text-lg); margin: 0; }
.post-card p { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--fw-light); line-height: var(--leading-relaxed); }
.post-card a.post-card__link { font-size: var(--text-sm); font-weight: var(--fw-medium); }

/* ---------- empty / coming-soon state ---------- */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  border: 1px dashed var(--border-default);
  background: var(--cream-50);
  border-radius: var(--radius-xl);
  padding: var(--space-9) var(--space-6);
}
.empty-state h3 { font-size: var(--text-lg); margin: 0 0 var(--space-3); color: var(--text-heading); }
.empty-state p { color: var(--text-muted); font-weight: var(--fw-light); max-width: 46ch; margin: 0 auto; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.post {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-block: var(--space-8) var(--space-12);
}
.post__meta { font-size: var(--text-xs); color: var(--accent); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: var(--fw-semibold); margin-bottom: var(--space-4); }
.post h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 var(--space-5); }
.post__date { font-size: var(--text-sm); color: var(--text-faint); margin-bottom: var(--space-8); }
.post__body { font-size: var(--text-md); line-height: var(--leading-relaxed); font-weight: var(--fw-light); color: var(--text-body); display: flex; flex-direction: column; gap: var(--space-5); }
.post__body h2 { font-size: var(--text-xl); margin-top: var(--space-4); }
.post__body img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.post__body figcaption { font-size: var(--text-xs); color: var(--text-faint); text-align: center; margin-top: var(--space-2); }
.post__promo { background: var(--accent-wash); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-5); font-size: var(--text-md); }
.post__promo strong { color: var(--accent-press); }
.post__back { display: inline-block; margin-top: var(--space-9); font-size: var(--text-sm); font-weight: var(--fw-medium); }

/* ============================================================
   FOOTER (shared with main site)
   ============================================================ */
.footer { border-top: 1px solid var(--border-soft); padding-block: var(--space-7); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.footer__links { display: flex; align-items: center; gap: var(--space-6); font-size: var(--text-sm); }
.footer__links a { color: var(--text-muted); }
.footer__links a:hover { color: var(--accent-hover); }
.footer__social { display: inline-flex; }
.footer__social:hover { text-decoration: none; }
.footer__copy { font-size: var(--text-sm); color: var(--text-faint); }