/* ============================================================
   article.css: long-form pages (blog posts + /local landing pages)
   Loaded after /site.css. Uses ONLY the design's tokens (--bg, --s1,
   --tx, --am, --rule ...) and its fonts (Archivo + JetBrains Mono),
   so these pages read like the design's own long-form pages.
   Markup comes from scripts/restyle-articles.mjs and the blog agent
   (content-agent/lib/page-shell.js).
   ============================================================ */

/* ---- page header ---- */
.art-h1{font-size:clamp(36px,4.2vw,68px);max-width:22ch}
.phd .pm{margin-top:4px}
.phd .lede a{text-decoration:underline;text-underline-offset:3px}

/* ---- sections ---- */
.art-sec{padding:clamp(56px,6vw,96px) 0}
.art-sec+.art-sec{border-top:1px solid var(--rule)}
.art-sec.alt{background:var(--s1)}
.art-sec .eb{margin-bottom:20px}
.art-h2{font-size:clamp(30px,3.4vw,52px)}
.art-sec .sh{margin-bottom:clamp(32px,4vw,52px)}
.art-sec .sh .lede a,.art-sec .body a,.art-measure a{text-decoration:underline;text-underline-offset:3px}
.art-measure{max-width:68ch}
.art-mt{margin-top:20px}
.art-sec .body+.body{margin-top:18px}
.leaks .eb+h2{margin-bottom:0}

/* cards inside the design's 3-up grid (.ben) */
.art-sec.alt .ben>div{background:var(--bg)}
.ben>.art-card .chk{margin-top:4px}
.ben .chk a{color:var(--tx);font-weight:600}.ben .chk a:hover{color:var(--am)}

/* checklist: design's .chk, but top-aligned for multi-line items */
.art-chk{gap:16px}
.art-chk li{align-items:flex-start;color:var(--tx2)}
.art-chk li::before{margin-top:1px}
.art-chk li>a{display:inline-block;padding:9px 0}
.art-chk:has(>li>a){gap:0}

/* FAQ: design's accordion (.fql details.meth); the + is drawn in CSS */
.fql .meth-b a{text-decoration:underline;text-underline-offset:3px}

/* inline "read more" link with the design's arrow nudge */
.art-lnk::after{content:"→";display:inline-block;transition:transform .3s var(--q)}
.art-lnk:hover::after{transform:translateX(4px)}
.art-sec .art-lnk{margin-top:24px}

/* related pages list */
.art-rel{display:flex;flex-direction:column;max-width:760px;border-top:1px solid var(--rule2)}
.art-rel a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule);color:var(--tx);font:600 17px/1.35 Archivo,system-ui,sans-serif}
.art-rel a::after{content:"→";flex:none;color:var(--am);transition:transform .3s var(--q)}
.art-rel a:hover{color:var(--am)}.art-rel a:hover::after{transform:translateX(4px)}

/* ---- blog post body ---- */
.art .prose,.art .art-author{max-width:780px}
.prose{color:var(--tx2);font-size:18px;line-height:1.7}
.prose>*+*{margin-top:20px}
.prose h2{font-weight:800;font-variation-settings:"wdth" 72;text-transform:uppercase;line-height:1;letter-spacing:-.005em;text-wrap:balance;font-size:clamp(26px,2.4vw,34px);color:var(--tx);margin-top:clamp(44px,5vw,64px)}
.prose h3{font:700 clamp(19px,1.6vw,22px)/1.3 Archivo,system-ui,sans-serif;color:var(--tx);margin-top:36px}
.prose h2+*,.prose h3+*{margin-top:14px}
.prose strong,.prose b{color:var(--tx);font-weight:600}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{list-style:none;display:flex;flex-direction:column;gap:10px}
.prose ul>li{position:relative;padding-left:26px}
.prose ul>li::before{content:"";position:absolute;left:0;top:.85em;width:12px;height:1px;background:var(--am)}
.prose ol{counter-reset:o}
.prose ol>li{position:relative;padding-left:40px;counter-increment:o}
.prose ol>li::before{content:counter(o,decimal-leading-zero);position:absolute;left:0;top:.2em;font:500 14px "JetBrains Mono",monospace;color:var(--am)}
.prose blockquote{max-width:none;margin:36px 0}.prose blockquote p{color:var(--tx)}
.prose hr{border:0;height:1px;background:var(--rule2);margin:44px 0}
.prose table{display:block;overflow-x:auto;width:100%;border-collapse:collapse;font-size:16px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--rule)}
.prose th{font:500 13px "JetBrains Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);border-bottom-color:var(--rule2)}
.prose code{font:500 .88em "JetBrains Mono",monospace;background:var(--s2);padding:2px 6px}
.prose img{margin:32px 0;border:1px solid var(--rule2)}

/* callouts used in older posts */
.pull-quote{margin:36px 0;padding:20px 26px;border-left:2px solid var(--am);background:rgba(217,160,91,.07)}
.pull-quote p{font:500 clamp(20px,1.8vw,24px)/1.45 Archivo,system-ui,sans-serif;color:var(--tx)}
.step-box{padding:22px 24px;border:1px solid var(--rule2);background:var(--s1);transition:border-color .3s}
.step-box:hover{border-color:rgba(217,160,91,.5)}
.step-box p{color:var(--tx2);font-size:16px}
.step-num{display:block;margin-bottom:8px;font:500 13px "JetBrains Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--am)}

/* author box (design's .me card) */
.art-author{display:flex;gap:18px;align-items:flex-start;margin-top:56px;padding:24px;border:1px solid var(--rule2);background:var(--s1)}
.art-ini{flex:none;width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(217,160,91,.5);font:500 14px "JetBrains Mono",monospace;color:var(--am)}
.art-author strong{display:block;font:700 18px Archivo,system-ui,sans-serif;color:var(--tx)}
.art-author p{margin-top:6px;color:var(--tx2);font-size:16px}

/* closing call to action (design's .ready band): two stacked buttons */
.art-cta .btn+.btn{margin-top:12px}

@media(max-width:560px){.art-h1{font-size:clamp(32px,9vw,44px)}.prose{font-size:17px}.art-author{flex-direction:column}}

/* in-post newsletter signup (blog agent, 2026-10-25): the post page's only signup */
.art-nl{display:flex;flex-direction:column;gap:12px;max-width:780px;margin-top:56px;padding:24px;border:1px solid rgba(217,160,91,.5);background:var(--s1)}
.art-nl p{margin:0;color:var(--tx);font-size:18px;line-height:1.5}
.art-nl .nlf{margin-top:4px}
body:has(.art-nl) .ft-nl{display:none}

/* ---- /local (Areas served), 2026-10-27 ---- */
/* a card that spans the whole .ben row (the "everyone else" and "rest of DFW" cards) */
.ben>.art-wide{grid-column:1/-1}
.ben>.art-card .art-lnk{margin-top:auto;padding-top:6px;color:var(--am)}
/* service x business type x city index: one table, every /local guide linked */
.art-mxw{max-width:980px}
.art-mx{width:100%;border-collapse:collapse;border:1px solid var(--rule2);font-size:16px}
.art-mx caption{caption-side:top;text-align:left;padding-bottom:14px;font-size:13px}
.art-mx th,.art-mx td{text-align:left;vertical-align:middle;padding:14px 18px;border-bottom:1px solid var(--rule)}
.art-mx thead th{font:500 12px "JetBrains Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);border-bottom-color:var(--rule2)}
.art-mx tbody th[scope=row]{font:500 16px/1.3 Archivo,system-ui,sans-serif;color:var(--tx2)}
.art-mx .grp th{background:var(--s1);padding-top:18px;font:700 clamp(18px,1.5vw,21px)/1.25 Archivo,system-ui,sans-serif;border-top:1px solid var(--rule2)}
.art-mx .grp a{color:var(--tx)}.art-mx .grp a::after{content:" →";color:var(--am)}
/* each city link fills its whole cell, so the tap target is the cell (>=44px tall on phones) */
.art-mx td{padding:0}
.art-mx td a{display:flex;align-items:center;min-height:52px;padding:14px 18px;color:var(--tx);font-weight:600;text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:4px;transition:color .2s}
.art-mx a:hover,.art-mx td a:hover{color:var(--am);text-decoration-color:var(--am)}
@media(max-width:560px){.art-mx{font-size:14px}.art-mx th{padding:12px 8px}.art-mx td a{min-height:48px;padding:12px 8px}.art-mx thead th{font-size:10px;letter-spacing:.05em}.art-mx tbody th[scope=row]{font-size:14px}}

/* AEO: "The short answer" box at the top of each post (same look as the guides' short-version box) */
.art-ans{padding:22px 26px;border:1px solid var(--rule2);border-left:2px solid var(--am);background:var(--s1);margin-bottom:36px}
.art-ans .k{display:block;margin-bottom:10px}
.prose .art-ans p{color:var(--tx);margin:0}
@media(max-width:560px){.art-ans{padding:18px 20px}}