/* Shared styling for all Ardor blog pages (listing + articles).
   Matches the homepage design system so the blog feels native. */

* { margin:0; padding:0; box-sizing:border-box; }
:root { --blue:#C65A1E; --copper:#A84A1A; --ink:#0B0B0B; --slate:#6B6B6B; --line:#e6e3e0; --bg:#ffffff; --soft:#F3F3F3; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
html { scroll-behavior:smooth; }
a { color:inherit; }

/* NAV (same as homepage) */
nav { display:flex; align-items:center; justify-content:space-between; padding:18px 48px; position:sticky; top:0; background:#0B0B0B; border-bottom:1px solid rgba(255,255,255,.08); z-index:30; }
nav .logo { display:flex; align-items:center; }
nav .logo img { height:64px; width:auto; display:block; filter:brightness(0) invert(1); }
.navlinks { display:flex; gap:30px; font-size:14px; font-weight:500; }
.navlinks a { text-decoration:none; color:#b9b3a8; }
.navlinks a:hover, .navlinks a.active { color:#fff; }
.btn { background:var(--blue); color:#fff; font-size:15px; font-weight:600; padding:14px 26px; border-radius:10px; text-decoration:none; border:none; cursor:pointer; transition:background .2s ease, transform .2s ease, box-shadow .2s ease; display:inline-block; }
.btn:hover { background:var(--copper); transform:translateY(-2px); box-shadow:0 8px 22px rgba(198,90,30,.38); }

/* PAGE HEADER (listing) */
.blog-head { background:#0B0B0B; color:#fff; text-align:center; padding:90px 24px 80px; position:relative; overflow:hidden; }
.blog-head::before { content:''; position:absolute; inset:0; background:radial-gradient(60% 70% at 50% 0%, rgba(198,90,30,.22), transparent 70%); pointer-events:none; }
.blog-head .eyebrow { color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; position:relative; }
.blog-head h1 { font-size:52px; font-weight:700; letter-spacing:-0.03em; max-width:760px; margin:0 auto; line-height:1.1; position:relative; }
.blog-head p { color:#a9a39a; font-size:18px; max-width:560px; margin:22px auto 0; line-height:1.6; position:relative; }

/* POST GRID (listing) */
.post-grid { max-width:1600px; margin:0 auto; padding:70px 24px 90px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.post-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.post-card:hover { transform:translateY(-5px); box-shadow:0 16px 34px rgba(11,11,11,.10); }
.post-card .thumb { width:100%; height:190px; object-fit:cover; display:block; background:var(--soft); }
.post-card .body { padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post-tag { display:inline-block; align-self:flex-start; font-size:12px; font-weight:600; color:var(--blue); background:#f8ede5; border-radius:30px; padding:4px 12px; }
.post-card h2 { font-size:21px; font-weight:700; letter-spacing:-0.01em; margin:14px 0 10px; line-height:1.25; }
.post-card p { font-size:14px; color:var(--slate); line-height:1.6; flex:1; }
.post-meta { font-size:13px; color:#9a948b; margin-top:18px; }
.post-card .more { margin-top:16px; font-size:14px; font-weight:600; color:var(--blue); }

/* ARTICLE (single post) */
.article { max-width:740px; margin:0 auto; padding:64px 24px 40px; }
.article .back { font-size:14px; font-weight:600; color:var(--blue); text-decoration:none; display:inline-block; margin-bottom:28px; }
.article .back:hover { color:var(--copper); }
.article .post-tag { margin-bottom:20px; }
.article h1 { font-size:42px; font-weight:700; letter-spacing:-0.02em; line-height:1.15; margin-bottom:18px; }
.article .meta { font-size:14px; color:#9a948b; margin-bottom:30px; }
.article .hero-img { width:100%; height:auto; border-radius:16px; margin-bottom:8px; display:block; }
.article-body { padding-bottom:30px; }
.article-body p { font-size:17px; line-height:1.8; color:#2a2a2a; margin:22px 0; }
.article-body h2 { font-size:28px; font-weight:700; letter-spacing:-0.01em; margin:42px 0 6px; }
.article-body h3 { font-size:21px; font-weight:650; margin:32px 0 4px; }
.article-body ul, .article-body ol { margin:18px 0 18px 24px; }
.article-body li { font-size:17px; line-height:1.8; color:#2a2a2a; margin:8px 0; }
.article-body strong { color:var(--ink); }
.article-body blockquote { border-left:3px solid var(--blue); padding:6px 0 6px 22px; margin:28px 0; font-size:19px; line-height:1.6; color:#1a1a1a; font-style:italic; }

/* ARTICLE CTA */
.post-cta { background:var(--ink); color:#fff; text-align:center; padding:60px 24px; border-radius:20px; max-width:740px; margin:30px auto 80px; }
.post-cta h2 { font-size:30px; font-weight:700; letter-spacing:-0.02em; }
.post-cta p { color:#b8b2a8; margin:14px auto 26px; max-width:420px; }

/* RELATED POSTS (cross-linking block under each article) */
.related { max-width:740px; margin:10px auto 0; padding:0 24px; }
.related > h2 { font-size:22px; font-weight:700; letter-spacing:-0.01em; margin-bottom:18px; }
.related-grid { display:grid; gap:14px; }
.related-card { border:1px solid var(--line); border-radius:12px; padding:18px 20px; text-decoration:none; color:inherit; display:block; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.related-card:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(11,11,11,.08); border-color:var(--blue); }
.related-card .post-tag { margin-bottom:0; }
.related-title { font-size:18px; font-weight:650; letter-spacing:-0.01em; margin:10px 0 6px; line-height:1.3; }
.related-desc { font-size:14px; color:var(--slate); line-height:1.55; }
.article-body a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.article-body a:hover { color:var(--copper); }

/* FOOTER (same as homepage) */
footer { border-top:1px solid var(--line); background:#fff; color:var(--slate); padding:64px 48px 36px; }
.foot-top { max-width:1600px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.foot-brand .logo img { height:76px; }
.foot-brand p { margin-top:20px; font-size:14px; line-height:1.7; max-width:340px; color:var(--slate); }
.foot-col h4 { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-bottom:16px; }
.foot-col a { display:block; font-size:14px; color:var(--slate); text-decoration:none; margin-bottom:12px; }
.foot-col a:hover { color:var(--blue); }
.foot-bottom { max-width:1600px; margin:44px auto 0; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#9a948b; }
.foot-legal { display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.foot-legal a { color:#9a948b; text-decoration:none; }
.foot-legal a:hover { color:var(--blue); }
.socials { display:flex; gap:12px; }
.socials a { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--slate); transition:color .2s, border-color .2s; }
.socials a:hover { color:var(--blue); border-color:var(--blue); }
.socials svg { width:17px; height:17px; }

@media(max-width:820px){
  .navlinks{display:none;} nav{padding:16px 22px;}
  .blog-head h1{font-size:38px;} .article h1{font-size:32px;}
  .post-grid{grid-template-columns:1fr 1fr;}
  .foot-top{grid-template-columns:1fr 1fr;}
  .foot-bottom{flex-direction:column; gap:18px; align-items:flex-start;}
  footer{padding:48px 22px 32px;}
}
@media(max-width:560px){ .post-grid{grid-template-columns:1fr;} }