/* =====================================================================
   6 MUSHROOMS - BLOG index (.six-blog) and single post (.six-post)
   All sizes in px (theme sets html font-size:10px, so rem is 62.5% off).
   Every colour comes from the global tokens in chrome.css - never hardcode.
   Card discipline mirrors shop.css so post cards and product cards align.
   ===================================================================== */
.six-blog, .six-post{
  --f: var(--ap-font);
  --ink:var(--ap-ink); --ink-2:var(--ap-ink-2); --muted:var(--ap-mute); --faint:var(--ap-faint);
  --line:var(--ap-line); --line-soft:var(--ap-line-soft); --line-strong:var(--ap-line-strong);
  --canvas:var(--ap-canvas); --parch:var(--ap-parchment); --surface:var(--ap-surface);
  --plum:var(--ap-plum); --plum-h:var(--ap-plum-dark); --plum-tint:var(--ap-plum-tint);
  --wrap:1280px; --gut:clamp(20px,4vw,48px); --measure:68ch; --r:16px;
  --e:cubic-bezier(.16,1,.3,1);
  font-family:var(--f); color:var(--ink); background:var(--canvas);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.six-blog *, .six-post *{box-sizing:border-box;}
.six-blog .bl-wrap, .six-post .po-wrap{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); width:100%;
}
.six-blog h1,.six-blog h2,.six-post h1,.six-post h2,.six-post h3{
  margin:0; font-weight:700; letter-spacing:-.022em; line-height:1.2; color:var(--ink);
}
.six-blog p,.six-post p{margin:0;}
.six-blog a,.six-post a{color:inherit; text-decoration:none;}
.six-blog img,.six-post img{max-width:100%; display:block;}

/* ---------- HEAD (identical pattern to shop / cart / checkout) ---------- */
.six-blog .bl-crumb,.six-post .po-crumb{padding:18px 0 0; font-size:12.5px; color:var(--faint);}
.six-blog .bl-crumb .bl-wrap,.six-post .po-crumb .po-wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
}
.six-blog .bl-crumb a:hover,.six-post .po-crumb a:hover{color:var(--ink); text-decoration:underline;}
.six-blog .bl-head{padding:20px 0 26px; border-bottom:1px solid var(--line-soft);}
.six-blog .bl-head h1{font-size:clamp(28px,3vw,38px); letter-spacing:-.026em;}
.six-blog .bl-sub{margin-top:8px; font-size:15px; color:var(--muted); max-width:62ch;}
.six-blog .bl-body{padding-block:24px 72px;}
.six-blog .bl-count{font-size:14px; color:var(--muted); margin-bottom:22px;}
.six-blog .bl-count strong{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;}

/* ---------- INDEX GRID ---------- */
.six-blog .bl-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,2.6vw,38px) clamp(18px,1.9vw,26px);
}
/* fixed row track so title / excerpt / meta line up across every card */
.six-blog .bl-card{display:grid; grid-template-rows:auto auto auto 1fr auto; align-content:start;}
.six-blog .bl-card-media{
  display:block; aspect-ratio:16/10; border-radius:var(--r); overflow:hidden;
  background:var(--parch); margin-bottom:14px;
}
.six-blog .bl-img{width:100%; height:100%; object-fit:cover; transition:transform .65s var(--e);}
.six-blog .bl-card:hover .bl-img{transform:scale(1.05);}
.six-blog .bl-noimg{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  font-size:52px; font-weight:700; color:var(--line-strong);
}
.six-blog .bl-cat{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--plum); margin-bottom:7px;
}
.six-blog .bl-title{font-size:18px; font-weight:700; letter-spacing:-.016em; line-height:1.32; margin-bottom:8px;}
.six-blog .bl-title a{color:var(--ink); transition:color .18s var(--e);}
.six-blog .bl-card:hover .bl-title a{color:var(--plum);}
.six-blog .bl-excerpt{font-size:14.5px; line-height:1.6; color:var(--muted); margin-bottom:12px;}
.six-blog .bl-meta{
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--faint);
  font-variant-numeric:tabular-nums;
}

/* ---------- PAGINATION (same shape as the shop's) ---------- */
.six-blog .bl-pager{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:52px;}
.six-blog .bl-page{
  min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px; border:1px solid var(--line); border-radius:11px;
  font-size:14px; color:var(--ink); background:var(--canvas);
  transition:background-color .18s var(--e), border-color .18s var(--e);
}
.six-blog .bl-page:hover{background:var(--plum-tint); border-color:var(--plum);}
.six-blog .bl-page.is-active{background:var(--plum); border-color:var(--plum); color:var(--canvas); font-weight:700;}
.six-blog .bl-page.dots{border-color:transparent; background:none;}

/* ---------- EMPTY ---------- */
.six-blog .bl-empty{text-align:center; padding:70px 0;}
.six-blog .bl-empty h2{font-size:24px; margin-bottom:10px;}
.six-blog .bl-empty p{color:var(--muted); margin-bottom:22px;}
.six-blog .bl-btn,
.six-post .po-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:13px 28px; border-radius:9999px; border:0; cursor:pointer;
  background:var(--plum); color:var(--ap-on-dark);
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.012em;
  transition:background-color .2s var(--e), transform .15s var(--e);
}
.six-blog .bl-btn:hover,.six-post .po-btn:hover{background:var(--plum-h); transform:translateY(-1px);}
.six-blog .bl-btn:active,.six-post .po-btn:active{transform:translateY(0);}

/* =====================================================================
   SINGLE POST
   ===================================================================== */
/* the measure applies to the article HEAD only (title + meta read better in a
   column); the body and hero run the full container width */
.six-post .po-head .po-measure{max-width:var(--measure);}
.six-post .po-head{padding:20px 0 22px;}
.six-post .po-eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--plum); margin-bottom:12px;
}
.six-post .po-head h1{font-size:clamp(30px,3.4vw,44px); line-height:1.14; letter-spacing:-.028em;}
.six-post .po-meta{
  display:flex; align-items:center; gap:9px; margin-top:14px;
  font-size:13.5px; color:var(--faint); font-variant-numeric:tabular-nums;
}
.six-post .po-hero{margin:8px 0 34px;}
.six-post .po-hero img{
  width:100%; height:auto; max-height:520px; object-fit:cover;
  border-radius:var(--r); background:var(--parch);
}

/* ---------- ARTICLE BODY ----------
   Full container width, matching the hero image. */
.six-post .po-body{
  max-width:none; width:100%;
  font-size:17.5px; line-height:1.78; color:var(--ink-2); padding-bottom:56px;
}
.six-post .po-body > *{margin-bottom:22px;}
.six-post .po-body > *:last-child{margin-bottom:0;}
.six-post .po-body p{font-size:17.5px; line-height:1.78; color:var(--ink-2);}
/* Posts carry their own <h1> in the body (a second H1 on the page). It fell
   through to the parent theme at 64px. Demote it to section scale - the real
   page H1 is in the header above. */
.six-post .po-body h1{
  font-size:30px !important; font-weight:700; letter-spacing:-.024em; line-height:1.2;
  margin:44px 0 16px; color:var(--ink);
}
.six-post .po-body > h1:first-child{margin-top:0;}
.six-post .po-body h2{font-size:26px; letter-spacing:-.022em; line-height:1.24; margin:40px 0 14px; color:var(--ink);}
.six-post .po-body h3{font-size:20px; letter-spacing:-.018em; line-height:1.3; margin:30px 0 10px; color:var(--ink);}
.six-post .po-body h4{font-size:17px; font-weight:700; margin:24px 0 8px; color:var(--ink);}
.six-post .po-body a{color:var(--plum); text-decoration:underline; text-underline-offset:3px;}
.six-post .po-body strong{color:var(--ink); font-weight:700;}
.six-post .po-body ul,.six-post .po-body ol{padding-left:22px; margin-bottom:20px;}
.six-post .po-body li{margin-bottom:9px; line-height:1.68;}
.six-post .po-body img{
  width:100%; height:auto; border-radius:var(--r); margin-block:28px; background:var(--parch);
}
.six-post .po-body figure{margin:28px 0;}
.six-post .po-body figcaption{margin-top:9px; font-size:13px; color:var(--faint); text-align:left;}
.six-post .po-body blockquote{
  margin:28px 0; padding:4px 0 4px 20px;
  border-left:3px solid var(--plum);
  font-size:19px; line-height:1.6; color:var(--ink); font-style:normal;
}
.six-post .po-body blockquote p{font-size:19px; color:var(--ink);}
.six-post .po-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14.5px; background:var(--parch); padding:2px 6px; border-radius:6px; color:var(--ink);
}
.six-post .po-body pre{
  background:var(--parch); padding:18px; border-radius:12px; overflow-x:auto; font-size:14px;
}
.six-post .po-body pre code{background:none; padding:0;}
.six-post .po-body hr{border:0; border-top:1px solid var(--line); margin:34px 0;}
.six-post .po-body table{
  width:100%; border-collapse:collapse; margin:26px 0; font-size:15px; display:block; overflow-x:auto;
}
.six-post .po-body th,.six-post .po-body td{
  border:1px solid var(--line); padding:10px 12px; text-align:left;
}
.six-post .po-body th{background:var(--parch); font-weight:700; color:var(--ink);}

/* ---------- RELATED ---------- */
.six-post .po-related{border-top:1px solid var(--line-soft); padding-block:44px;}
.six-post .po-related h2{font-size:22px; margin-bottom:22px;}
.six-post .po-rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px);}
.six-post .po-rel{display:grid; grid-template-rows:auto auto auto; gap:4px;}
.six-post .po-rel-media{
  display:block; aspect-ratio:16/10; border-radius:14px; overflow:hidden;
  background:var(--parch); margin-bottom:10px;
}
.six-post .po-rel-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e);}
.six-post .po-rel:hover .po-rel-media img{transform:scale(1.05);}
.six-post .po-rel-noimg{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  font-size:40px; font-weight:700; color:var(--line-strong);
}
.six-post .po-rel-title{font-size:16px; font-weight:700; letter-spacing:-.014em; line-height:1.34; color:var(--ink);}
.six-post .po-rel:hover .po-rel-title{color:var(--plum);}
.six-post .po-rel-date{font-size:12.5px; color:var(--faint);}

/* ---------- END CTA ---------- */
.six-post .po-cta{background:var(--parch); padding-block:40px; margin-bottom:0;}
.six-post .po-cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.six-post .po-cta h2{font-size:22px; margin-bottom:6px;}
.six-post .po-cta p{font-size:15px; color:var(--muted);}

/* ---------- REVEAL (matches shop/home) ---------- */
.six-anim .six-blog [data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--e), transform .5s var(--e);
  transition-delay:calc(var(--i,0) * 50ms);
}
.six-anim .six-blog [data-reveal].in{opacity:1; transform:none;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1000px){
  .six-blog .bl-grid{grid-template-columns:repeat(2,1fr);}
  .six-post .po-rel-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .six-blog .bl-grid{grid-template-columns:1fr;}
  .six-post .po-rel-grid{grid-template-columns:1fr;}
  .six-post .po-body{font-size:16.5px;}
  .six-post .po-body h2{font-size:23px;}
  .six-post .po-cta-inner{flex-direction:column; align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  .six-blog *,.six-post *{transition:none !important;}
  .six-anim .six-blog [data-reveal]{opacity:1 !important; transform:none !important;}
}