/* SweetHive blog: index cards + long-form article body.
   Loaded by the /blog/ index pages; the SweetReach publisher builds article
   pages from that same chrome, so they inherit this file too. */

/* The publisher splices articles after </header>: the nav is wrapped in
   <header class="site-header">. display:contents keeps the nav's sticky
   positioning relative to the page, so the layout is identical to other pages. */
.site-header{display:contents}

/* ---------- index ---------- */
.blog-list{padding:64px 0 88px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:960px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}}
.blog-grid:empty{display:none}
.blog-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;transition:border-color .15s ease, transform .15s ease}
.blog-card:hover{border-color:var(--violet);transform:translateY(-2px)}
.blog-card:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.blog-shot{aspect-ratio:16/9;background:var(--violet-wash);border-bottom:1px solid var(--line);overflow:hidden}
.blog-shot img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.blog-date{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.blog-lang{margin-left:8px;color:var(--violet)}
.blog-card h3{font-size:19px;line-height:1.25}
.blog-card p{font-size:15px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.blog-more{margin-top:auto;padding-top:8px;font-family:var(--disp);font-size:14.5px;color:var(--violet)}
.blog-note{font-size:15px;color:var(--muted);margin:0 0 22px}
.blog-empty{border:1px dashed var(--line);border-radius:16px;padding:48px 24px;text-align:center;background:var(--card)}
.blog-empty h2{font-size:clamp(22px,3vw,28px);margin-bottom:8px}
.blog-empty p{color:var(--muted);max-width:520px;margin:0 auto}
.blog-empty[hidden],.blog-note[hidden]{display:none}
@media(max-width:560px){.blog-list{padding:44px 0 64px}}

/* ---------- article pages (built by the publisher) ----------
   SweetHive template: header.pagehero.blog-hero (crumbs, h1, .sub, .blog-meta),
   section.legal.blog-article > article.doc.blog-body, section.blog-cta.
   Also covers the AerariumChain template class names (.page-hero, .eyebrow,
   .story-meta, .story-body, .btn-row, .btn-solid, section.light). */
.blog-hero .wrap{max-width:768px}
.blog-hero h1{max-width:none}
.blog-meta{margin-top:6px}
.blog-meta a{color:var(--violet)}
.blog-meta a:hover,.blog-hero .crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.blog-article{padding-bottom:56px}
.page-hero{padding:64px 0 40px;position:relative;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(30px,4.4vw,48px);margin:14px 0 16px;max-width:22ch}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.story-meta,.article-meta{font-size:14.5px;color:var(--muted)}
.story-meta a,.article-meta a{color:var(--violet)}
.story-meta a:hover,.article-meta a:hover{text-decoration:underline;text-underline-offset:3px}
section.light{background:var(--paper)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-solid{background:var(--amber);color:var(--amber-ink)}
.btn-solid:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(239,159,39,.55)}

.blog-body,.story-body,.article-body{max-width:720px;font-size:18px;line-height:1.75;color:var(--ink);overflow-wrap:break-word}
.blog-body > :first-child,.story-body > :first-child,.article-body > :first-child{margin-top:0}
:is(.blog-body,.story-body,.article-body) p{margin:0 0 22px;font-size:inherit;line-height:inherit;text-wrap:pretty}
:is(.blog-body,.story-body,.article-body) h1{font-size:clamp(30px,4.4vw,44px);margin:0 0 22px}
:is(.blog-body,.story-body,.article-body) h2{font-size:clamp(24px,3vw,30px);line-height:1.2;margin:48px 0 16px}
:is(.blog-body,.story-body,.article-body) h3{font-size:clamp(19px,2.2vw,22px);line-height:1.3;margin:36px 0 12px}
:is(.blog-body,.story-body,.article-body) h4{font-family:var(--disp);font-weight:500;font-size:18px;margin:28px 0 10px}
:is(.blog-body,.story-body,.article-body) a{color:var(--violet);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
:is(.blog-body,.story-body,.article-body) a:hover{color:var(--violet-deep)}
:is(.blog-body,.story-body,.article-body) strong{color:var(--ink);font-weight:600}
:is(.blog-body,.story-body,.article-body) :is(ul,ol){margin:0 0 22px;padding-left:1.4em}
:is(.blog-body,.story-body,.article-body) li{margin:0 0 8px;padding-left:4px;font-size:inherit;line-height:inherit}
:is(.blog-body,.story-body,.article-body) li::marker{color:var(--violet)}
:is(.blog-body,.story-body,.article-body) blockquote{margin:30px 0;padding:6px 0 6px 22px;border-left:3px solid var(--violet);color:var(--violet-deep);font-family:var(--disp);font-size:20px;line-height:1.5}
:is(.blog-body,.story-body,.article-body) blockquote p:last-child{margin-bottom:0}
:is(.blog-body,.story-body,.article-body) img,:is(.blog-body,.story-body,.article-body) video{max-width:100%;height:auto;border-radius:14px;display:block}
:is(.blog-body,.story-body,.article-body) > img{margin:30px 0}
:is(.blog-body,.story-body,.article-body) figure{margin:32px 0}
:is(.blog-body,.story-body,.article-body) figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.5}
:is(.blog-body,.story-body,.article-body) code{font-family:var(--mono);font-size:.86em;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:.12em .4em}
:is(.blog-body,.story-body,.article-body) pre{margin:0 0 24px;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow-x:auto;font-size:14px;line-height:1.6}
:is(.blog-body,.story-body,.article-body) pre code{background:none;border:0;padding:0;font-size:inherit}
:is(.blog-body,.story-body,.article-body) hr{border:none;border-top:1px solid var(--line);margin:40px 0}
:is(.blog-body,.story-body,.article-body) table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15.5px;display:block;overflow-x:auto}
:is(.blog-body,.story-body,.article-body) :is(th,td){border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
:is(.blog-body,.story-body,.article-body) th{font-family:var(--disp);font-weight:500;color:var(--ink)}
@media(max-width:560px){
  .page-hero{padding:44px 0 32px}
  .blog-body,.story-body,.article-body{font-size:17px;line-height:1.7}
  :is(.blog-body,.story-body,.article-body) h2{margin-top:40px}
}

/* ---------- nav: current page ---------- */
.navlinks a[aria-current="page"]{color:var(--ink)}

/* ---------- home page teaser (latest 3 articles) ---------- */
.home-blog[hidden]{display:none}
.home-blog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin-bottom:28px}
.home-blog-head h2{margin-bottom:0}
.home-blog-all{font-family:var(--disp);font-size:15px;color:var(--violet);white-space:nowrap}
.home-blog-all:hover{text-decoration:underline;text-underline-offset:3px}