/* Differently — article / hub styles (loaded alongside styles.css) */
.breadcrumb{font-size:13px;color:var(--mute);margin:30px 0 0;}
.breadcrumb a{color:var(--soft);}
.breadcrumb a:hover{color:var(--text);}

/* ---- Articles hub ---- */
.hub-hero{text-align:center;padding:70px 0 26px;}
.hub-hero .pill{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);color:var(--accent2);font-size:13px;font-weight:600;padding:7px 15px;border-radius:999px;margin-bottom:22px;border:1px solid var(--accent-line);}
.hub-hero h1{font-size:clamp(30px,5vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.07;margin-bottom:18px;}
.hub-hero h1 .hl{color:var(--accent);}
.hub-hero p{font-size:clamp(15px,2vw,18px);color:var(--soft);max-width:600px;margin:0 auto;line-height:1.6;}
.artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:10px 0 0;}
@media(max-width:880px){.artgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.artgrid{grid-template-columns:1fr;}}
.artcard{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 22px;transition:border-color .18s,transform .18s;height:100%;}
.artcard:hover{border-color:var(--accent-line);transform:translateY(-3px);}
.artcard .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:23px;margin-bottom:15px;}
.artcard .k{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:7px;}
.artcard h3{font-size:18.5px;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin-bottom:9px;}
.artcard p{font-size:14px;color:var(--soft);line-height:1.58;flex:1;}
.artcard .read{margin-top:15px;font-size:13.5px;font-weight:700;color:var(--accent2);display:inline-flex;align-items:center;gap:6px;}
.ico.v{background:rgba(124,108,240,.14);color:#9a8cf7;}
.ico.t{background:rgba(34,211,197,.14);color:#22d3c5;}
.ico.a{background:rgba(247,183,51,.16);color:#f7b733;}
.ico.p{background:rgba(244,114,182,.14);color:#f472b6;}
.ico.s{background:rgba(86,176,255,.14);color:#56b0ff;}
.ico.g{background:rgba(55,201,138,.14);color:#37c98a;}

/* ---- Single article ---- */
.art{max-width:720px;margin:0 auto;padding:8px 0 40px;}
.art-hero{padding:18px 0 8px;}
.art-hero .k{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2);margin-bottom:12px;}
.art-hero h1{font-size:clamp(28px,4.4vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin-bottom:16px;}
.art-hero .lede{font-size:clamp(16px,2vw,19px);color:var(--soft);line-height:1.6;}
.art-meta{display:flex;gap:14px;align-items:center;font-size:12.5px;color:var(--mute);margin-top:18px;padding-bottom:22px;border-bottom:1px solid var(--border);}
.art-body{font-size:16.5px;line-height:1.72;color:#d7dae6;}
.art-body h2{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:38px 0 14px;}
.art-body h3{font-size:18px;font-weight:700;color:var(--text);margin:26px 0 10px;}
.art-body p{margin:0 0 18px;}
.art-body b,.art-body strong{color:var(--text);font-weight:700;}
.art-body a{color:var(--accent2);text-decoration:underline;text-underline-offset:2px;}
.art-body ul{margin:0 0 18px;padding-left:4px;list-style:none;}
.art-body ul li{position:relative;padding-left:26px;margin-bottom:10px;}
.art-body ul li::before{content:"";position:absolute;left:6px;top:10px;width:7px;height:7px;border-radius:2px;background:var(--accent);}
.pullquote{font-size:21px;line-height:1.45;font-weight:700;letter-spacing:-.02em;color:var(--text);border-left:3px solid var(--accent);padding:6px 0 6px 20px;margin:28px 0;}
.takeaways{background:linear-gradient(180deg,var(--accent-soft),transparent 96%);border:1px solid var(--accent-line);border-radius:var(--r-lg);padding:22px 24px;margin:30px 0;}
.takeaways h4{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent2);margin-bottom:12px;}
.takeaways ul{list-style:none;}
.takeaways ul li{position:relative;padding-left:26px;margin-bottom:9px;font-size:15px;color:var(--soft);}
.takeaways ul li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--accent);font-weight:800;}
.art-cta{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-xl);padding:30px 28px;margin:40px 0 8px;text-align:center;}
.art-cta h3{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;}
.art-cta p{font-size:15px;color:var(--soft);max-width:460px;margin:0 auto 20px;line-height:1.6;}
.art-disc{font-size:12.5px;color:var(--mute);line-height:1.6;margin-top:34px;padding-top:20px;border-top:1px solid var(--border);}
.related{margin-top:42px;}
.related h4{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin-bottom:14px;}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.related-grid{grid-template-columns:1fr;}}
.related a{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;transition:border-color .18s;display:block;}
.related a:hover{border-color:var(--accent-line);}
.related a .rk{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);}
.related a h5{font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin-top:5px;color:var(--text);}

/* ── 2026-07: ADHD-friendly reading layer ── */
.tldr{background:linear-gradient(180deg,rgba(34,211,197,.10),transparent 90%);border:1px solid rgba(34,211,197,.35);border-radius:var(--r-lg);padding:20px 22px;margin:26px 0 6px;}
.tldr .tl-k{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:12px;}
.tldr ul{list-style:none;margin:0;padding:0;}
.tldr ul li{position:relative;padding-left:24px;margin-bottom:8px;font-size:15px;line-height:1.55;color:var(--text);}
.tldr ul li::before{content:"→";position:absolute;left:0;top:0;color:var(--teal);font-weight:800;}
.tldr ul li b{color:var(--teal);}
mark,.hl-mark{background:rgba(124,108,240,.22);color:var(--text);border-radius:4px;padding:1px 5px;}
.art-body .keyline{font-size:18.5px;font-weight:700;color:var(--text);line-height:1.5;}
.art-body .bigstat{font-size:34px;font-weight:800;color:var(--accent2);letter-spacing:-.03em;line-height:1;margin-right:8px;vertical-align:-2px;}
.art-body p{max-width:66ch;}