/* ============================================================ article.css — shared styles for /tips-* article pages (Direction D). Accent follows the topic; set it on : class="art-orange" → pavers class="art-green" → washing class="art-blue" → pool Pair with the hero classes from d-style.css (ph-orange/green/blue + hl-o/hl-g/hl-b for the headline keyword). ============================================================ */ body.art-orange{--art:var(--orange);--art-hi:var(--orange-hi);--art-b1:var(--band-orange-1);--art-b2:var(--band-orange-2);} body.art-green {--art:var(--green); --art-hi:var(--green-hi); --art-b1:var(--band-green-1); --art-b2:var(--band-green-2);} body.art-blue {--art:var(--blue); --art-hi:var(--blue-hi); --art-b1:var(--band-blue-1); --art-b2:var(--band-blue-2);} :root{--art:var(--orange);--art-hi:var(--orange-hi);--art-b1:var(--band-orange-1);--art-b2:var(--band-orange-2);} .art-hero{padding-bottom:64px;} .art-meta{display:flex;gap:9px;margin-top:24px;flex-wrap:wrap;} .art-meta .chip{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.8);} .article{max-width:760px;margin:0 auto;} .article p{font-size:16.5px;line-height:1.75;color:var(--txt);margin:0 0 20px;} .article p strong{color:var(--navy);} .article h2{font-size:30px;margin:44px 0 16px;letter-spacing:-.02em;} .article ul{margin:0 0 20px 22px;display:flex;flex-direction:column;gap:8px;color:var(--txt);font-size:16px;line-height:1.6;} .article a.il{color:var(--art);font-weight:700;} .callout{background:var(--off);border-left:5px solid var(--art);border-radius:0 18px 18px 0;padding:20px 24px;margin:26px 0;} .callout b{font-family:var(--disp);font-weight:800;color:var(--navy);display:block;margin-bottom:5px;} .callout p{font-size:14.5px;margin:0;color:var(--txt);} .art-img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);margin:32px 0;} .art-img img{width:100%;} .art-img figcaption{padding:12px 18px;background:#fff;font-size:12.5px;color:var(--mut);} .art-cta{background:linear-gradient(168deg,var(--art-b1),var(--art-b2));border-radius:26px;padding:34px 36px;margin:40px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#fff;box-shadow:var(--sh-lg);} .art-cta b{font-family:var(--disp);font-weight:800;font-size:24px;display:block;letter-spacing:-.01em;} .art-cta small{font-size:13.5px;color:rgba(255,255,255,.8);display:block;margin-top:4px;} .art-cta .dbtn-white{color:var(--art-b2);} .related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto;} @media (max-width:900px){.related{grid-template-columns:1fr;}} .rel{--c:var(--art);background:#fff;border-radius:22px;padding:22px;box-shadow:var(--sh);position:relative;overflow:hidden;transition:transform .25s;} .rel::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--c);} .rel:hover{transform:translateY(-3px);} .rel[data-c="wash"]{--c:var(--green);} .rel[data-c="paver"]{--c:var(--orange);} .rel[data-c="pool"]{--c:var(--blue);} .rel .chip{background:color-mix(in srgb,var(--c) 11%,transparent);color:var(--c);font-family:var(--disp);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;} .rel h3{font-size:17px;margin-top:10px;line-height:1.2;} .rel .go{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--c);margin-top:12px;display:inline-block;}