/* CannaBloom — page-post.css
 * ============================================================
 * Pixel-matched to inner-post.html
 *
 * Layout: 720px article column + 280px right rail (sticky TOC).
 * Markup is rendered by single.php in the child theme.
 * ============================================================ */

.cb-journal-main{background:var(--paper)}

/* =====================================================
 * Article wrap — center + max-width
 * ===================================================== */
.cb-article-wrap{
  display:grid;
  grid-template-columns:minmax(0,720px) 280px;
  gap:80px;justify-content:center;
  padding:80px 56px 96px;
  max-width:1280px;margin:0 auto;
}

/* =====================================================
 * Eyebrow row — terracotta line + italic label
 * ===================================================== */
.cb-eyebrow-row{
  display:inline-flex;align-items:center;gap:12px;
  margin-bottom:30px;color:var(--terracotta);
}
.cb-eyebrow-row .line{display:inline-block;width:30px;height:1.5px;background:var(--terracotta)}
.cb-eyebrow-row .label{
  font:400 italic 16px var(--font-display);
  letter-spacing:.06em;color:var(--terracotta);
}
.cb-eyebrow-row .dot{margin:0 8px;color:rgba(158,80,43,.5)}

/* =====================================================
 * H1 — italic Cormorant
 * ===================================================== */
.cb-article h1{
  font:300 italic clamp(44px,5.5vw,72px)/1.02 var(--font-display);
  letter-spacing:-.022em;
  margin:0 0 32px;color:var(--ink);
}

/* =====================================================
 * Byline — avatar + author + meta
 * ===================================================== */
.cb-byline{
  display:flex;align-items:center;gap:18px;
  font-size:13px;color:rgba(31,26,18,.65);
  margin-bottom:40px;flex-wrap:wrap;
}
.cb-byline .cb-avatar{
  width:42px;height:42px;border-radius:99px;
  background:var(--linen-warm) center/cover;
}
.cb-byline .by{font-weight:600;color:var(--ink);font-size:14px}
.cb-byline .meta{font-size:12.5px;letter-spacing:.06em;color:rgba(31,26,18,.55)}
.cb-byline .sep{
  width:3px;height:3px;border-radius:99px;
  background:rgba(31,26,18,.3);
}

/* =====================================================
 * Hero image + caption
 * ===================================================== */
.cb-hero-img{
  aspect-ratio:16/9;background:var(--linen-warm) center/cover;
  border-radius:8px;margin-bottom:14px;
}
.cb-caption{
  font:400 italic 14px var(--font-display);
  color:rgba(31,26,18,.55);
  margin:0 0 50px;text-align:center;letter-spacing:.04em;
}

/* =====================================================
 * Article body — long-form typography
 * ===================================================== */
.cb-article-body{font-size:17px;line-height:1.78;color:var(--ink)}
.cb-article-body p{margin:0 0 24px;color:rgba(31,26,18,.85)}

/* Drop-cap on the very first paragraph */
.cb-article-body > p:first-of-type::first-letter,
.cb-article-body p.lede::first-letter{
  font:400 italic 5.4em var(--font-display);
  float:left;line-height:.85;
  padding:6px 14px 0 0;color:var(--terracotta);
}

.cb-article-body h2{
  font:400 36px/1.1 var(--font-display);
  letter-spacing:-.018em;
  margin:50px 0 22px;color:var(--ink);
}
.cb-article-body h2 i{font-style:italic;color:var(--olive-deep);font-weight:300}
.cb-article-body h3{
  font:500 24px var(--font-display);
  letter-spacing:-.01em;margin:36px 0 14px;
}

.cb-article-body blockquote,
.cb-article-body .pullquote{
  margin:48px 0;padding:8px 0 8px 32px;
  border-left:2px solid var(--terracotta);
  font:300 italic 28px/1.3 var(--font-display);
  letter-spacing:-.012em;color:var(--ink);
}
.cb-article-body blockquote cite,
.cb-article-body .pullquote cite{
  display:block;
  font:600 12px var(--font-body);
  font-style:normal;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--terracotta);margin-top:14px;
}

/* Inline image inside content */
.cb-article-body .wp-block-image,
.cb-article-body img.aligncenter,
.cb-article-body img.alignnone,
.cb-article-body figure{
  margin:40px 0 14px;aspect-ratio:16/10;
  background:var(--linen-warm);border-radius:6px;overflow:hidden;
}
.cb-article-body figure img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.cb-article-body figcaption{
  font:400 italic 14px var(--font-display);
  color:rgba(31,26,18,.55);
  text-align:center;letter-spacing:.04em;
  margin-top:10px;
}

/* Arrow list */
.cb-article-body ul.arrow-list,
.cb-article-body .wp-block-list.arrow-list{
  list-style:none;margin:24px 0 32px;padding:0;
  display:flex;flex-direction:column;gap:12px;
}
.cb-article-body ul.arrow-list li,
.cb-article-body .arrow-list li{
  position:relative;padding-left:26px;
  font-size:16.5px;line-height:1.65;color:rgba(31,26,18,.85);
}
.cb-article-body ul.arrow-list li::before,
.cb-article-body .arrow-list li::before{
  content:'\2192';position:absolute;left:0;top:1px;
  color:var(--terracotta);font-weight:500;
}

/* =====================================================
 * Right rail
 * ===================================================== */
.cb-rail{
  position:sticky;top:140px;align-self:flex-start;
  display:flex;flex-direction:column;gap:36px;
}
.cb-rail .widget,
.cb-rail .widget-title{margin:0;padding:0;border:0}
.cb-rail .widget-title,
.cb-rail h4{
  font:600 11.5px var(--font-body);
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink);
  margin:0 0 18px;padding-bottom:14px;
  border-bottom:1px solid rgba(31,26,18,.1);
}
.cb-rail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.cb-rail ul li a{
  font-size:13.5px;color:rgba(31,26,18,.7);
  line-height:1.45;display:block;padding-left:14px;
  border-left:1.5px solid transparent;
  transition:color .15s,border-color .15s;
}
.cb-rail ul li a:hover,
.cb-rail ul li.active a,
.cb-rail ul li a.active{
  color:var(--terracotta);
  border-left-color:var(--terracotta);
  font-weight:500;
}

/* =====================================================
 * Continue reading
 * ===================================================== */
.cb-continue{
  padding:80px 56px 96px;
  border-top:1px solid rgba(31,26,18,.1);
  max-width:1600px;margin:0 auto;
}
.cb-continue__head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:36px;flex-wrap:wrap;gap:20px;
}
.cb-continue__head h2{
  font:400 48px/1 var(--font-display);
  letter-spacing:-.018em;margin:0;
}
.cb-continue__head h2 i{font-style:italic;color:var(--olive-deep);font-weight:300}
.cb-continue__head p{margin:0;color:rgba(31,26,18,.6);max-width:32ch}

.cb-continue__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.cb-post-card{
  display:flex;flex-direction:column;cursor:pointer;
  transition:transform .25s ease;text-decoration:none;color:var(--ink);
}
.cb-post-card:hover{transform:translateY(-4px)}
.cb-post-card .img{
  aspect-ratio:1.4/1;background:var(--linen-warm) center/cover;
  border-radius:6px;position:relative;overflow:hidden;
}
.cb-post-card .body{padding:18px 4px 6px}
.cb-post-card .cat{
  font:400 italic 13.5px var(--font-display);
  color:var(--terracotta);margin:0 0 8px;letter-spacing:.04em;
}
.cb-post-card h3{
  font:500 24px/1.2 var(--font-display);
  letter-spacing:-.01em;color:var(--ink);
  margin:0 0 10px;
}
.cb-post-card:hover h3{color:var(--terracotta)}
.cb-post-card p{
  font-size:14px;color:rgba(31,26,18,.65);
  margin:0 0 14px;line-height:1.55;
}

/* =====================================================
 * Responsive
 * ===================================================== */
@media (max-width:1024px){
  .cb-article-wrap{
    grid-template-columns:1fr;gap:48px;
    padding:48px 24px 64px;
  }
  .cb-rail{position:static}
  .cb-continue{padding:48px 24px 64px}
  .cb-continue__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .cb-continue__grid{grid-template-columns:1fr}
}