/* ===========================================================================
   Astaela — blog & content hub styles
   Loaded on the landing page (the "Latest from the Stars" grid) and on every
   /blog page. Inherits the shared design system from astaela.css: flat dark
   aesthetic, Space Grotesk + IBM Plex Mono, ONE accent (pink). No stock photos:
   article thumbnails are flat CSS motifs so pages stay fast and on-brand.
   =========================================================================== */

/* ---- post cards (shared: homepage "Latest" + /blog hub + related strips) -- */
.post-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
@media(max-width:860px){ .post-grid{grid-template-columns:1fr; gap:16px} }

.post-card{display:flex; flex-direction:column; border:1px solid var(--line);
  border-radius:6px; overflow:hidden; background:var(--surface);
  transition:border-color .15s, transform .15s; color:inherit}
.post-card:hover{border-color:var(--accent); transform:translateY(-2px)}
.post-card:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px}

.post-thumb{position:relative; aspect-ratio:16/9; background:var(--bg-2);
  border-bottom:1px solid var(--line-2); display:grid; place-items:center; overflow:hidden}
.post-thumb .glyph{font-size:clamp(54px,9vw,86px); line-height:1; color:var(--line);
  user-select:none}
.post-thumb .chip{position:absolute; top:12px; left:12px; font:500 10px/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:rgba(8,9,12,.55)}
/* a faint guide-line motif so the flat thumb still reads as "a map" */
.post-thumb::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(255,255,255,.025) 26px 27px),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,.025) 26px 27px)}

.post-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1}
.post-body h3{font:500 clamp(17px,1.4vw,19px)/1.28 var(--sans); letter-spacing:-.01em;
  margin:0; color:var(--text)}
.post-card:hover .post-body h3{color:var(--accent-2)}
.post-dek{font:300 14px/1.5 var(--sans); color:var(--text-2); margin:0; flex:1}
.post-meta{display:flex; align-items:center; gap:10px; font:500 10px/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-top:2px}
.post-meta .dot{opacity:.5}

/* ---- /blog hub ----------------------------------------------------------- */
.blog-hero{max-width:var(--maxw); margin:0 auto; padding:clamp(40px,6vw,72px) 30px clamp(20px,3vw,34px)}
.blog-hero h1{font:500 clamp(38px,6vw,68px)/1.0 var(--sans); letter-spacing:-.03em; margin:18px 0 0; color:var(--text)}
.blog-hero h1 em{font-style:normal; color:var(--accent)}
.blog-hero p{font:300 clamp(17px,2vw,20px)/1.5 var(--sans); color:var(--text-2); max-width:54ch; margin:20px 0 0}

.cat-row{max-width:var(--maxw); margin:0 auto; padding:0 30px 8px; display:flex; flex-wrap:wrap; gap:12px}
.cat-pill{font:500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2); border:1px solid var(--line); border-radius:999px; padding:11px 16px;
  transition:border-color .15s,color .15s}
.cat-pill:hover{border-color:var(--accent); color:var(--accent)}

.blog-section{max-width:var(--maxw); margin:0 auto; padding:clamp(28px,4vw,48px) 30px}
.blog-section > .rlabel{font:500 11px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:24px; display:block}

/* ---- category / theme landing pages -------------------------------------- */
.cat-hero{max-width:var(--maxw); margin:0 auto; padding:clamp(44px,6vw,80px) 30px clamp(26px,3vw,40px);
  display:grid; grid-template-columns:minmax(0,1fr); gap:18px}
.cat-hero .eyebrow{margin-bottom:6px}
.cat-hero h1{font:500 clamp(40px,6.4vw,76px)/.98 var(--sans); letter-spacing:-.032em; margin:0; color:var(--text); max-width:16ch}
.cat-hero h1 em{font-style:normal; color:var(--accent)}
.cat-hero .lead{font:300 clamp(17px,2vw,21px)/1.5 var(--sans); color:var(--text-2); max-width:58ch; margin:8px 0 0}
.cat-hero .cta-row{margin-top:30px}

.prose-wrap{max-width:760px; margin:0 auto; padding:clamp(20px,3vw,36px) 30px clamp(40px,5vw,64px)}

/* ---- article page -------------------------------------------------------- */
.article{max-width:760px; margin:0 auto; padding:clamp(36px,5vw,64px) 30px}
.crumbs{font:500 11px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:22px}
.crumbs a{color:var(--text-3)}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{opacity:.5; margin:0 8px}

.article-head h1{font:500 clamp(32px,5vw,54px)/1.04 var(--sans); letter-spacing:-.03em; margin:14px 0 0; color:var(--text)}
.article-head h1 em{font-style:normal; color:var(--accent)}
.article-dek{font:300 clamp(18px,2.2vw,22px)/1.5 var(--sans); color:var(--text-2); margin:22px 0 0}
.article-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:24px 0 0;
  font:500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-3)}
.article-meta .dot{opacity:.5}
.article-rule{border:0; border-top:1px solid var(--line-2); margin:34px 0}

/* readable body column */
.article-body{font:300 17.5px/1.74 var(--sans); color:var(--text)}
.article-body > * + *{margin-top:22px}
.article-body h2{font:500 clamp(24px,3vw,32px)/1.18 var(--sans); letter-spacing:-.02em; color:var(--text); margin-top:46px}
.article-body h3{font:500 19px/1.3 var(--sans); letter-spacing:-.01em; color:var(--text); margin-top:32px}
.article-body p{color:var(--text-2)}
.article-body strong{color:var(--text); font-weight:500}
.article-body a{color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,93,143,.4)}
.article-body a:hover{text-decoration-color:var(--accent)}
.article-body em{font-style:italic; color:var(--text-2)}
.article-body ul,.article-body ol{padding-left:22px; color:var(--text-2)}
.article-body li{margin-top:8px}
.article-body li::marker{color:var(--accent)}
.article-body blockquote{margin:30px 0; padding:4px 0 4px 22px; border-left:2px solid var(--accent);
  font:400 clamp(19px,2.4vw,23px)/1.45 var(--sans); color:var(--text); font-style:normal}
.article-body .pull{font:400 clamp(20px,2.6vw,26px)/1.35 var(--sans); color:var(--text); letter-spacing:-.01em;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:26px 0; margin:36px 0}
.article-body .pull em{font-style:normal; color:var(--accent)}

/* inline conversion band reused on articles + category pages */
.inline-cta{margin:44px 0; padding:clamp(26px,4vw,40px); border:1px solid var(--line);
  border-radius:8px; background:var(--bg-2); text-align:center}
.inline-cta h3{font:500 clamp(22px,3vw,30px)/1.12 var(--sans); letter-spacing:-.02em; color:var(--text); margin:0}
.inline-cta h3 em{font-style:normal; color:var(--accent)}
.inline-cta p{font:300 16px/1.55 var(--sans); color:var(--text-2); max-width:50ch; margin:14px auto 0}
.inline-cta .cta-row{justify-content:center; margin-top:24px}
.inline-cta .microtrust{justify-content:center}

/* "keep reading" strip at the foot of an article */
.more-reading{max-width:var(--maxw); margin:0 auto; padding:clamp(36px,5vw,64px) 30px; border-top:1px solid var(--line-2)}
.more-reading .rlabel{font:500 11px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--text-3); margin-bottom:24px; display:block}