/* Blog list + article: clean white premium look (owner, 9 Oct 2026). Loaded only by blog.php / blog-article.php. */
body.v5:has(.blog-top){background:#fff}
body.v5:has(.blog-top) main{background:#fff}
body.v5 .blog-top{position:relative;padding:clamp(120px,15vw,168px) 0 clamp(26px,4vw,40px);
  background:radial-gradient(60% 80% at 90% 0%,rgba(208,20,44,.06),transparent 60%),linear-gradient(180deg,#F4F5F7 0%,#fff 100%);border-bottom:1px solid rgba(14,17,20,.06)}
body.v5 .blog-top .muted.small{display:inline-flex;gap:6px;align-items:center;padding:6px 14px;border-radius:99px;border:1px solid rgba(14,17,20,.10);background:#fff;color:#434A53;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
body.v5 .blog-top .muted.small a{color:#0E1114}
body.v5 .blog-top h1{color:#0E1114;font-weight:800;font-size:clamp(32px,5vw,62px);line-height:1.02;letter-spacing:-.02em;max-width:22ch;margin:16px 0 16px}
body.v5 .blog-top h1 em{font-style:normal;color:#D0142C;-webkit-text-stroke:0}
body.v5 .blog-top .eyebrow{color:#D0142C}
body.v5 .blog-top p{color:#434A53}

/* sections below the top keep a white canvas; alternate band is a soft cool grey */
body.v5:has(.blog-top) main>.section{background:#fff}
body.v5:has(.blog-top) main>.section-alt{background:#F6F7F9}

/* cards: white, hairline border, soft lift on hover */
body.v5:has(.blog-top) .blog-grid .card,body.v5:has(.blog-top) .blog-feat,body.v5:has(.blog-top) main .grid .card{background:#fff!important;border:1px solid rgba(14,17,20,.08)!important;border-radius:18px!important;
  box-shadow:0 1px 2px rgba(14,17,20,.04),0 12px 32px -18px rgba(14,17,20,.18)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
body.v5:has(.blog-top) .blog-grid .card:hover,body.v5:has(.blog-top) .blog-feat:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(14,17,20,.05),0 22px 44px -20px rgba(14,17,20,.26)!important}
body.v5:has(.blog-top) .blog-grid .card::before,body.v5:has(.blog-top) .blog-grid .card::after,body.v5:has(.blog-top) .blog-feat::before,body.v5:has(.blog-top) .blog-feat::after{display:none!important}
body.v5:has(.blog-top) .blog-grid .card h2,body.v5:has(.blog-top) .blog-grid .card h3,body.v5:has(.blog-top) .blog-feat h2{color:#0E1114}
body.v5:has(.blog-top) .badge{background:#FBEAEC;color:#B3122A;border:0}
body.v5:has(.blog-top) .bmeta{color:#78808A}
body.v5:has(.blog-top) .chips li{background:#fff!important;border:1px solid rgba(14,17,20,.12)!important;color:#434A53!important}
body.v5:has(.blog-top) .chips li.on{background:#0E1114!important;border-color:#0E1114!important;color:#fff!important}

/* article reading column */
body.v5 .blog-top.article-top h1{font-size:clamp(30px,4.4vw,52px);max-width:24ch}
body.v5 .blog-top .bmeta{color:#78808A}
body.v5 .blog-top>.container>img,body.v5 .article-hero-img{border-radius:20px;box-shadow:0 24px 50px -28px rgba(14,17,20,.35)}
body.v5:has(.blog-top) .article-body{font-size:18px;line-height:1.75;color:#2B3138}
body.v5:has(.blog-top) .article-body h2{color:#0E1114;font-size:clamp(24px,2.6vw,32px);line-height:1.2;margin:44px 0 14px;letter-spacing:-.01em}
body.v5:has(.blog-top) .article-body h3{color:#0E1114;font-size:21px;margin:30px 0 10px}
body.v5:has(.blog-top) .article-body p{margin:0 0 18px}
body.v5:has(.blog-top) .article-body a{color:#B3122A;text-decoration:underline;text-underline-offset:3px}
body.v5:has(.blog-top) .article-body figure img,body.v5:has(.blog-top) .article-body img{border-radius:16px}
body.v5:has(.blog-top) .article-body figcaption{color:#78808A;font-size:14px;margin-top:8px;text-align:center}
body.v5:has(.blog-top) .article-body blockquote{margin:26px 0;padding:6px 0 6px 20px;border-left:3px solid #D0142C;color:#0E1114;font-size:20px}
body.v5:has(.blog-top) .author-box{background:#F6F7F9;border-color:rgba(14,17,20,.06)!important;border-radius:16px!important}
body.v5:has(.blog-top) .price-band{background:#0E1114!important;color:#EEF1F4;border-radius:22px!important;border:0!important}
body.v5:has(.blog-top) .price-band h2,body.v5:has(.blog-top) .price-band h3{color:#fff}
body.v5:has(.blog-top) .price-band .lead{color:#C9D0D8}
/* small "how this was made" AI-assist note (blog list + article) */
body.v5 .ai-note{margin:22px 0 0;padding:10px 14px;border-left:2px solid rgba(208,20,44,.5);background:#F6F7F9;border-radius:0 10px 10px 0;color:#5B636D;font-size:12.5px;line-height:1.55;max-width:760px}
body.v5 .ai-note b{color:#2B3138;font-weight:700}
@media (max-width:640px){body.v5:has(.blog-top) .article-body{font-size:17px}}