/* ============================================================
   MO RAN SPA — Blog / Journal styles (reuses styles.css tokens)
   Load order: styles.css → styles-2.css → blog.css
   ============================================================ */

/* blog nav sits solid (no dark hero behind it) */
.nav{ background:color-mix(in srgb,var(--bg) 92%, transparent); backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid var(--line); }
.nav .brand img{ height:40px; }
.nav-links a{ color:var(--bark); opacity:.82; }

.blog-main{ padding-top:78px; }

/* ---- Breadcrumb ---- */
.breadcrumb{ font-size:.84rem; color:var(--stone); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.breadcrumb a{ color:var(--accent); font-weight:600; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb span.sep{ opacity:.5; }

/* ---- Article hero ---- */
.article-hero{ padding:36px 0 8px; }
.article-cat{ display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.article-cat b{ width:14px; height:14px; background:var(--accent); -webkit-mask:var(--leaf) center/contain no-repeat; mask:var(--leaf) center/contain no-repeat; }
.article-hero h1{ font-size:clamp(2.3rem,5.2vw,3.7rem); line-height:1.04; margin:16px 0 14px; max-width:18ch; text-wrap:balance; }
.article-lede{ font-family:var(--serif); font-style:italic; font-size:clamp(1.25rem,2.6vw,1.6rem); color:var(--stone); line-height:1.45; max-width:46ch; }
.article-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin-top:22px; color:var(--stone); font-size:.9rem; font-weight:600; }
.article-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--accent); }
.article-figure{ margin:30px 0 0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); position:relative; }
.article-figure img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9; }
.article-figure figcaption{ font-size:.82rem; color:var(--stone); padding:10px 4px 0; }

/* ---- Layout: prose + sticky aside ---- */
.article-layout{ display:grid; grid-template-columns:1fr; gap:40px; padding:40px 0 0; }
.toc{ background:var(--offwhite); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; }
.toc b{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); font-weight:800; }
.toc ol{ margin:12px 0 0; padding-left:1.1em; display:flex; flex-direction:column; gap:8px; }
.toc a{ color:var(--bark); font-weight:600; font-size:.95rem; }
.toc a:hover{ color:var(--accent); }

/* ---- Prose ---- */
.prose{ max-width:none; }
.prose > *{ max-width:none; }
.prose p,.prose li{ font-size:1.14rem; line-height:1.78; color:var(--bark); }
.prose p{ margin:0 0 1.25em; text-wrap:pretty; }
.prose h2{ font-size:clamp(1.7rem,3.4vw,2.3rem); margin:1.7em 0 .5em; scroll-margin-top:96px; }
.prose h3{ font-size:1.4rem; margin:1.4em 0 .4em; scroll-margin-top:96px; }
.prose a:not(.btn){ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.prose a:not(.btn):hover{ color:var(--accent-2); }
.prose ul,.prose ol{ margin:0 0 1.25em; padding-left:1.3em; display:flex; flex-direction:column; gap:.5em; }
.prose ul li{ list-style:none; position:relative; padding-left:1.4em; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.62em; width:11px; height:11px; background:var(--accent); -webkit-mask:var(--leaf) center/contain no-repeat; mask:var(--leaf) center/contain no-repeat; }
.prose strong{ color:var(--bark); font-weight:700; }
.prose hr{ border:0; border-top:1px solid var(--line); margin:2.4em 0; }

/* pull quote */
.pullquote{ font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,3vw,2rem); line-height:1.35; color:var(--heading); margin:1.4em 0; padding:6px 0 6px 26px; border-left:3px solid var(--accent); }

/* callout / key takeaways */
.callout{ background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; margin:1.6em 0; }
.callout b{ display:flex; align-items:center; gap:9px; font-family:var(--serif); font-size:1.25rem; color:var(--heading); margin-bottom:8px; }
.callout b::before{ content:""; width:16px; height:16px; flex:none; background:var(--accent); -webkit-mask:var(--leaf) center/contain no-repeat; mask:var(--leaf) center/contain no-repeat; }
.callout p:last-child,.callout ul:last-child{ margin-bottom:0; }

/* inline figure within prose */
.inline-fig{ margin:1.8em 0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.inline-fig img{ width:100%; display:block; aspect-ratio:3/2; object-fit:cover; }
.inline-fig figcaption{ font-size:.82rem; color:var(--stone); padding:10px 14px; background:var(--offwhite); }

/* comparison table */
.cmp{ width:100%; border-collapse:collapse; margin:1.4em 0; font-size:1rem; }
.cmp th,.cmp td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.cmp thead th{ font-family:var(--sans); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:800; }
.cmp tbody th{ font-family:var(--serif); font-size:1.15rem; color:var(--heading); font-weight:600; }
.cmp tbody tr:hover{ background:color-mix(in srgb,var(--accent) 5%, transparent); }

/* ---- In-article CTA band ---- */
.article-cta{ background:var(--deepband); color:var(--deepband-text); border-radius:calc(var(--radius) + 4px); padding:34px 32px; margin:2.4em 0; text-align:center; position:relative; overflow:hidden; }
.article-cta h3{ color:#fff; font-size:clamp(1.5rem,3vw,2.1rem); margin:0 0 8px; }
.article-cta p{ opacity:.85; margin:0 auto 20px; max-width:42ch; }
.article-cta .btn{ margin:0 4px; }

/* ---- FAQ block reuse ---- */
.article-faq{ margin-top:2.4em; }

/* ---- Related / hub cards ---- */
.related{ margin-top:64px; }
.related h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:24px; }
.post-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
.post-card{ display:flex; flex-direction:column; background:var(--offwhite); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.post-card .pc-media{ aspect-ratio:16/10; overflow:hidden; }
.post-card .pc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.post-card:hover .pc-media img{ transform:scale(1.05); }
.post-card .pc-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.post-card .pc-cat{ font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.post-card h3{ font-size:1.4rem; line-height:1.16; }
.post-card p{ color:var(--stone); font-size:.96rem; margin:0; flex:1; }
.post-card .pc-more{ color:var(--accent); font-weight:700; font-size:.92rem; margin-top:4px; }

/* ---- Pillar hub hero ---- */
.hub-hero{ position:relative; overflow:hidden; border-radius:0; }
.hub-hero .hub-bg{ position:absolute; inset:0; }
.hub-hero .hub-bg img{ width:100%; height:100%; object-fit:cover; }
.hub-hero .hub-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,30,22,.55),rgba(20,30,22,.78)); }
.hub-hero .hub-inner{ position:relative; z-index:2; padding:clamp(70px,12vw,130px) 0; color:#fff; }
.hub-hero .article-cat{ color:var(--clay-soft); }
.hub-hero .article-cat b{ background:var(--clay-soft); }
.hub-hero h1{ color:#fff; font-size:clamp(2.5rem,5.6vw,4rem); line-height:1.03; margin:16px 0 16px; max-width:20ch; }
.hub-hero p{ color:rgba(255,255,255,.9); font-size:1.15rem; max-width:50ch; }

@media (min-width:760px){
  .post-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px){
  .article-layout{ grid-template-columns:minmax(0,720px) 1fr; gap:60px; align-items:start; }
  .toc{ position:sticky; top:100px; order:2; }
  .prose-wrap{ order:1; }
  .post-grid{ grid-template-columns:repeat(3,1fr); }
  .related .post-grid.two{ grid-template-columns:1fr 1fr; }
}