/* FACTASH fun refresh — Nov 2026. Neo-brutalist + meme layer. Loaded only via home/blog-list/category/article CSS. */
:root{--fx-ink:#111;--fx-cream:#fff8e7;--fx-yellow:#ffd93d;--fx-pink:#ff6fb5;--fx-blue:#5ce1e6;--fx-green:#7ed957;--fx-orange:#ff914d;--fx-shadow:5px 5px 0 #111;--fx-r:14px;
--bg:#fff8e7;--surface:#fff;--border:#111;--primary:#111;--link:#1b2cc1;--link-hover:#d6246e;--accent:#d6246e;--radius:14px;
--font-sans:"Space Grotesk","Inter","Segoe UI",system-ui,sans-serif;--font:"Inter","Segoe UI",system-ui,sans-serif}
[data-theme="dark"]{--fx-cream:#14141a;--fx-ink:#f4f1ea;--bg:#14141a;--surface:#1f1f27;--border:#f4f1ea;--primary:#f4f1ea;--link:#8ab4ff;--fx-shadow:5px 5px 0 #000}
body{background:var(--bg);background-image:radial-gradient(rgba(17,17,17,.07) 1.2px,transparent 1.2px);background-size:22px 22px;font-family:var(--font)}
.site-header{background:var(--fx-yellow)!important;border-bottom:3px solid #111;color:#111}
.site-header a,.site-header .brand strong,.site-header small{color:#111!important}
.site-header .brand strong span{background:#111;color:var(--fx-yellow)!important;padding:0 .25em;border-radius:6px;margin-left:2px}
.nav-links a{font-weight:700;border-radius:999px;padding:.3em .75em}
.nav-links a:hover{background:#111;color:var(--fx-yellow)!important}
.more-panel{border:3px solid #111;box-shadow:var(--fx-shadow);border-radius:var(--fx-r);background:#fff}
h1,h2,h3{font-family:var(--font-sans);letter-spacing:-.02em}
h1{font-weight:800;line-height:1.08}
.kicker{display:inline-block;background:var(--fx-pink);color:#111!important;border:2px solid #111;border-radius:999px;padding:.15em .7em;font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;box-shadow:2px 2px 0 #111;transform:rotate(-2deg)}
.btn{background:var(--fx-green)!important;color:#111!important;border:3px solid #111!important;border-radius:999px!important;box-shadow:var(--fx-shadow);font-weight:800;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #111}
/* cards */
.card{background:var(--surface);border:3px solid #111!important;border-radius:var(--fx-r)!important;box-shadow:var(--fx-shadow);overflow:hidden;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translate(-3px,-3px) rotate(-.4deg);box-shadow:9px 9px 0 #111}
.card img{border-bottom:3px solid #111}
.card-h img{border-bottom:0;border-right:3px solid #111}
.grid-3>.card:nth-child(4n+1),.cat-grid>.card:nth-child(4n+1){background:#fffbe0}
.grid-3>.card:nth-child(4n+2),.cat-grid>.card:nth-child(4n+2){background:#ffeef6}
.grid-3>.card:nth-child(4n+3),.cat-grid>.card:nth-child(4n+3){background:#e9fbfc}
.grid-3>.card:nth-child(4n),.cat-grid>.card:nth-child(4n){background:#effbe8}
[data-theme="dark"] .card{background:var(--surface)!important}
.card h3{font-weight:800}
.section-head h2,.layout-with-aside h2{display:inline-block;background:#111;color:var(--fx-yellow);padding:.15em .55em;border-radius:10px;transform:rotate(-1deg)}
.section-head h2::after{content:" 🔥"}
.section-head a{font-weight:800}
.list-toolbar{font-weight:700}
.list-toolbar::before{content:"📚 "}
/* list hero + home hero */
.list-hero,.hero-feature,.hero{border:3px solid #111;border-radius:22px;box-shadow:8px 8px 0 #111;background:linear-gradient(135deg,var(--fx-yellow),var(--fx-orange) 55%,var(--fx-pink));overflow:hidden;color:#111}
.list-hero img,.hero img{border-radius:14px;border:3px solid #111}
.list-hero h1,.hero h1{font-size:clamp(2rem,5vw,3.4rem);text-shadow:3px 3px 0 #fff}
.home-intro{border:3px dashed #111;border-radius:var(--fx-r);background:#fff;padding:1rem}
.topic-row a,.trust{border:2px solid #111;border-radius:999px;background:#fff;box-shadow:2px 2px 0 #111;font-weight:700}
.topic-row a:hover{background:var(--fx-blue)}
.cat-block{border-top:4px dotted #111;padding-top:1.2rem}
.widget,aside .section{border:3px solid #111;border-radius:var(--fx-r);background:var(--fx-blue);box-shadow:var(--fx-shadow);padding:1rem}
.site-footer{background:#111!important;color:#fff;border-top:6px solid var(--fx-pink)}
/* article */
.article-header{background:#fff;border:3px solid #111;border-radius:22px;box-shadow:8px 8px 0 #111;padding:clamp(1rem,3vw,2rem);margin-top:1rem;position:relative}
.article-header::after{content:"✨";position:absolute;right:-12px;top:-18px;font-size:2.2rem;transform:rotate(14deg)}
.article-header h1{font-size:clamp(1.9rem,4.5vw,3rem)}
.lede{font-size:1.2rem;border-left:6px solid var(--fx-pink);padding-left:.8rem}
.fx-meme{position:relative;margin:0 0 1.5rem;border:3px solid #111;border-radius:18px;overflow:hidden;box-shadow:8px 8px 0 #111;background:#111}
.fx-meme img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover}
.fx-cap{font-size:clamp(1.05rem,3.4vw,2.3rem)!important;position:absolute;left:0;right:0;padding:.3em .6em;text-align:center;font-family:Impact,"Anton","Arial Black",sans-serif;font-size:clamp(1.3rem,4.2vw,2.8rem);line-height:1.05;color:#fff;text-transform:uppercase;letter-spacing:.02em;-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #000,-1px -1px 0 #000;pointer-events:none}
.fx-cap.top{top:.3em}.fx-cap.bot{bottom:.5em}
.fx-credit{font-size:.78rem;margin:.4rem 0 0;color:var(--muted)}
.fx-credit a{font-weight:700}
.cover figcaption{display:none}
.fx-inline{margin:2rem 0;transform:rotate(-.6deg)}
.fx-inline img{border:3px solid #111;border-radius:16px;box-shadow:6px 6px 0 var(--fx-pink);width:100%;height:auto}
.prose h2{position:relative;padding:.2em .5em;background:var(--fx-yellow);border:3px solid #111;border-radius:12px;box-shadow:4px 4px 0 #111;display:inline-block;margin-top:2.4rem;color:#111}
.prose h2::before{content:attr(data-fx);margin-right:.35em}
.prose h3{border-bottom:3px wavy var(--fx-pink);display:inline-block}
.prose blockquote,.fx-pull{border:3px solid #111;background:var(--fx-blue);border-radius:16px;box-shadow:6px 6px 0 #111;padding:1rem 1.2rem;font-size:1.25rem;font-weight:800;font-family:var(--font-sans);position:relative;color:#111}
.fx-pull::before{content:"💬";position:absolute;left:-16px;top:-18px;font-size:2rem}
.prose hr,.fx-div{border:0;height:18px;margin:2rem 0;background:radial-gradient(circle,#111 3px,transparent 3.5px) 0 50%/22px 18px repeat-x}
.prose ul li::marker{content:"👉 "}
.prose table{border:3px solid #111;border-radius:12px;overflow:hidden}
.prose th{background:var(--fx-yellow);color:#111}
.prose code{background:#ffeef6;border:1px solid #111;border-radius:6px}
.breadcrumb{font-weight:700}
@media (max-width:640px){.card-h img{border-right:0;border-bottom:3px solid #111}.fx-cap{font-size:clamp(1.05rem,3.4vw,2.3rem)!important;-webkit-text-stroke:1.2px #000}.article-header::after{right:4px}}
@media (prefers-reduced-motion:reduce){.card,.btn{transition:none}.card:hover{transform:none}}
/* v2: research direction */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,217,61,.82)!important;-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4)}
[data-theme="dark"] .site-header{background:rgba(20,20,26,.82)!important}
[data-theme="dark"] .site-header a,[data-theme="dark"] .site-header strong{color:#ffe600!important}
[data-theme="dark"]{--fx-yellow:#ffe600}
.grid-3,.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.4rem;grid-auto-flow:dense}
.grid-3>.card:first-child,.cat-grid>.card:first-child{grid-column:span 2;grid-row:span 2}
.grid-3>.card:first-child h3,.cat-grid>.card:first-child h3{font-size:clamp(1.4rem,2.6vw,2rem)}
.grid-3>.card:first-child::before,.cat-grid>.card:first-child::before{content:"📌 Pinned";position:absolute;margin:.6rem;background:var(--fx-yellow);border:2px solid #111;border-radius:999px;padding:.1em .6em;font-weight:800;font-size:.75rem;z-index:2}
.card{position:relative}
.card .meta::before{content:"⏱ "}
.card p:not(.meta){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prose{font-size:1.15rem;max-width:70ch;line-height:1.75}
.progress{height:5px;background:linear-gradient(90deg,var(--fx-pink),var(--fx-yellow),var(--fx-blue))!important;z-index:60}
@media (max-width:640px){.grid-3>.card:first-child,.cat-grid>.card:first-child{grid-column:auto;grid-row:auto}}
.kicker{width:fit-content;max-width:100%}