/* ===========================================================
   MiniBoo Journal (blog) styles
   Loads after fable.css and reuses its design tokens (--cream,
   --ink, --accent-strong, --display, --body, --r-lg, --r-md,
   --shadow-soft, --line, --maxw, and so on). Day palette only,
   comfortable reading measure, one accent, zero em-dashes.
   =========================================================== */

.blog-narrow{width:min(70ch,calc(100vw - 44px));margin-inline:auto}

/* fable.css's .nav-links doesn't style a "current page" state (only the
   about/contact pages' own embedded stylesheets do); add it here so the
   Journal link reads as active while on any Journal page. */
.nav-links a.current{background:rgba(255,255,255,.65);color:var(--accent-strong)}

/* ============ breadcrumb ============ */
.blog-bread{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--body);font-size:.85rem;color:var(--ink-soft);margin-bottom:18px}
.blog-bread a:hover{color:var(--accent-strong)}
.blog-bread span[aria-hidden]{opacity:.6}
.blog-bread span[aria-current]{color:var(--ink);font-weight:600}

/* ============ article head ============ */
.blog-head-wrap{padding-top:clamp(108px,13vw,152px)}
.blog-eyebrow{display:block;margin-bottom:12px}
.blog-head-wrap h1{font-size:clamp(2.1rem,4.6vw,3.3rem);margin-bottom:18px;max-width:22ch}
.blog-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--body);font-size:.92rem;color:var(--ink-soft)}
.blog-meta time{color:var(--ink-soft)}
.blog-meta .dot{opacity:.55}

/* ============ hero image ============ */
.blog-hero{margin:clamp(28px,4vw,44px) auto 0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-soft)}
.blog-hero img{width:100%;height:clamp(220px,42vw,480px);object-fit:cover}

/* ============ answer lede: the extractable, AI-cited block ============ */
.blog-answer{margin-top:clamp(34px,5vw,54px);padding:clamp(20px,3vw,30px) clamp(22px,3.4vw,32px);
  background:rgba(255,255,255,.55);border:1px solid var(--line);border-left:3px solid var(--accent-strong);
  border-radius:var(--r-md)}
.blog-answer p{font-family:var(--display);font-size:clamp(1.1rem,1.7vw,1.34rem);
  line-height:1.5;color:var(--ink);font-style:italic}

/* ============ body typography ============ */
.blog-body{margin-top:clamp(30px,4vw,44px)}
.blog-body h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:clamp(40px,5vw,58px) 0 16px}
.blog-body h3{margin:clamp(30px,4vw,40px) 0 12px}
.blog-body p{margin-bottom:1.15em;color:var(--ink)}
.blog-body p:first-of-type{margin-top:0}
.blog-body strong{color:var(--ink);font-weight:650}
.blog-body em{color:var(--accent-strong)}
.blog-body a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;
  color:var(--accent-strong);transition:text-decoration-color .25s}
.blog-body a:hover{text-decoration-color:var(--accent-strong)}
.blog-body ul,.blog-body ol{margin:0 0 1.3em;padding-left:1.3em}
.blog-body li{margin-bottom:.55em;line-height:1.6}
.blog-body blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.2em;border-left:3px solid var(--accent);
  color:var(--ink-soft);font-style:italic}

/* GFM tables: horizontal scroll wrapper keeps the page itself from scrolling */
.blog-table-wrap{margin:1.8em 0;overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--line)}
.blog-body table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:480px}
.blog-body th,.blog-body td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
.blog-body thead th{font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);background:rgba(162,115,79,.08)}
.blog-body tbody tr:last-child td{border-bottom:0}
.blog-body tbody tr:nth-child(even){background:rgba(162,115,79,.045)}

/* ============ products: "From the collection" ============ */
.blog-products{margin-top:clamp(50px,6vw,74px)}
.blog-products h2,.blog-faq h2,.blog-related h2{font-size:clamp(1.4rem,2.2vw,1.8rem);margin-bottom:20px}
.blog-product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.blog-product-card{display:block;border-radius:var(--r-md);overflow:hidden;background:rgba(255,255,255,.5);
  border:1px solid var(--line);transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft)}
.blog-product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.blog-product-card img{width:100%;height:180px;object-fit:cover}
.blog-product-copy{padding:14px 16px 18px}
.blog-product-copy h3{font-size:1.05rem;margin-bottom:4px}
.blog-product-copy p{font-size:.88rem;color:var(--ink-soft);line-height:1.5}

/* ============ FAQ ============ */
.blog-faq{margin-top:clamp(50px,6vw,74px)}
.blog-faq-list{border-top:1px solid var(--line)}
.blog-faq-item{border-bottom:1px solid var(--line);padding:18px 4px}
.blog-faq-item summary{cursor:pointer;list-style:none;font-family:var(--display);
  font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--ink);display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.blog-faq-item summary::-webkit-details-marker{display:none}
.blog-faq-item summary::after{content:"+";font-family:var(--body);font-size:1.3rem;color:var(--accent-strong);
  flex:0 0 auto;transition:transform .3s var(--ease-soft)}
.blog-faq-item[open] summary::after{transform:rotate(45deg)}
.blog-faq-item p{margin-top:12px;color:var(--ink-soft);line-height:1.6;max-width:66ch}

/* ============ related: "Keep reading" ============ */
.blog-related{margin-top:clamp(50px,6vw,74px);padding-bottom:clamp(50px,6vw,74px)}
.blog-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.blog-related-card{display:block;border-radius:var(--r-md);overflow:hidden;background:rgba(255,255,255,.5);
  border:1px solid var(--line);transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft)}
.blog-related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.blog-related-card img{width:100%;height:150px;object-fit:cover}
.blog-related-copy{padding:14px 16px 18px}
.blog-related-copy .eyebrow{display:block;margin-bottom:6px}
.blog-related-copy h3{font-size:1.05rem;line-height:1.3}

/* ============ Journal hub ============ */
.blog-hub-hero{padding-top:clamp(112px,14vw,158px);padding-bottom:clamp(30px,4vw,46px);max-width:min(50rem,92%)}
.blog-hub-hero h1{font-size:clamp(2.3rem,5vw,3.7rem);margin:14px 0 16px}
.blog-hub-hero .lede{max-width:56ch}
.blog-hub-empty{color:var(--ink-soft);font-size:1.05rem;padding:20px 0 60px}
.blog-hub-groups{padding-bottom:clamp(60px,8vw,100px)}
.blog-hub-group{margin-top:clamp(40px,5vw,60px)}
.blog-hub-group h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:22px}
.blog-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.blog-hub-card{display:block;border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.5);
  border:1px solid var(--line);box-shadow:0 18px 40px -28px rgba(94,72,52,.28);
  transition:transform .4s var(--ease-soft),box-shadow .4s var(--ease-soft)}
.blog-hub-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}
.blog-hub-card img{width:100%;height:190px;object-fit:cover}
.blog-hub-card-copy{padding:18px 20px 22px}
.blog-hub-card-copy .eyebrow{display:block;margin-bottom:8px}
.blog-hub-card-copy h3{font-size:1.2rem;margin-bottom:8px;line-height:1.25}
.blog-hub-card-copy p{font-size:.92rem;color:var(--ink-soft);line-height:1.55;margin-bottom:12px}
.blog-hub-card-meta{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-soft)}
.blog-hub-card-meta .dot{opacity:.55}

/* ============ responsive ============ */
@media(max-width:900px){
  .blog-head-wrap{padding-top:clamp(96px,15vw,130px)}
  .blog-hub-hero{padding-top:clamp(100px,16vw,134px)}
}
@media(max-width:640px){
  .blog-hero img{height:56vw}
  .blog-product-grid,.blog-related-grid,.blog-hub-grid{grid-template-columns:1fr}
}