/* ChuckleChow — mobile-first blog theme */
:root{
  --bg:#faf8f4; --surface:#ffffff; --ink:#1c1a17; --muted:#6f6a61;
  --brand:#e8442e; --brand-dark:#c93322; --accent:#ffb400;
  --line:#ece5d8; --radius:14px; --max:1120px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --serif:"Georgia","Times New Roman",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}

/* ---------- header ---------- */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.logo{font-weight:800;font-size:24px;letter-spacing:-.5px}
.logo b{color:var(--brand)}
.logo small{display:block;font-size:10px;font-weight:600;color:var(--muted);letter-spacing:2px;text-transform:uppercase}
.nav{display:flex;gap:4px;align-items:center}
.nav a{padding:8px 12px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--muted)}
.nav a:hover{background:#f3ede1;color:var(--ink)}
.nav a.active{background:var(--ink);color:#fff}
.menu-btn{display:none;background:none;border:0;font-size:26px;cursor:pointer}
@media(max-width:760px){
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--surface);flex-direction:column;align-items:stretch;padding:10px 18px 16px;border-bottom:1px solid var(--line);gap:2px}
  .nav.open{display:flex}
  .menu-btn{display:block}
}

/* ---------- hero ---------- */
.hero{background:linear-gradient(135deg,#1c1a17 0%,#3a2c22 60%,#572b1e 100%);color:#fff;border-radius:0 0 26px 26px;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;padding:44px 0}
.eyebrow{display:inline-block;background:var(--accent);color:#1c1a17;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:14px}
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.12;letter-spacing:-1px;margin-bottom:14px}
.hero p{color:#e8ded0;font-size:17px;max-width:46ch}
.hero-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;border:0}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
.hero-img{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
@media(max-width:860px){.hero-inner{grid-template-columns:1fr;padding:34px 0}.hero-img{order:-1;max-height:260px}.hero-img img{object-fit:cover;height:260px;width:100%}}

/* ---------- sections ---------- */
.section{padding:46px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;gap:10px}
.section-head h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.5px}
.section-head a{font-size:14px;font-weight:700;color:var(--brand);white-space:nowrap}
.cat-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.chip{background:var(--surface);border:1px solid var(--line);padding:9px 18px;border-radius:999px;font-size:14px;font-weight:700}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,26,23,.12)}
.card-img{aspect-ratio:16/9;overflow:hidden;background:#eee}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.cat-tag{align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.cat-comedy{background:#ffe9e4;color:#c93322}
.cat-relationships{background:#f3e4ff;color:#7b2fbf}
.cat-food{background:#e6f7e9;color:#1e7a34}
.card h3{font-size:19px;line-height:1.35;letter-spacing:-.3px}
.card p{font-size:14.5px;color:var(--muted);flex:1}
.card-meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}

/* featured */
.featured{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;margin-bottom:8px}
@media(max-width:860px){.featured{grid-template-columns:1fr}}
.featured-main{position:relative;border-radius:var(--radius);overflow:hidden;min-height:340px;display:flex;align-items:flex-end;color:#fff}
.featured-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.featured-main .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0) 60%)}
.featured-main .txt{position:relative;padding:26px}
.featured-main h3{font-size:clamp(22px,3vw,32px);letter-spacing:-.5px;line-height:1.25;margin:10px 0}
.featured-side{display:flex;flex-direction:column;gap:14px}
.mini{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.mini img{width:120px;height:96px;object-fit:cover;flex-shrink:0}
.mini .txt{padding:12px 12px 12px 0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.mini h4{font-size:15.5px;line-height:1.35}

/* ---------- article ---------- */
.article-hero{border-radius:18px;overflow:hidden;margin:26px 0;max-height:440px}
.article-hero img{width:100%;height:100%;object-fit:cover;max-height:440px}
.article-layout{display:grid;grid-template-columns:1fr 320px;gap:34px;align-items:start}
@media(max-width:960px){.article-layout{grid-template-columns:1fr}}
.article{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,4vw,46px)}
.article h1{font-size:clamp(28px,4vw,44px);line-height:1.18;letter-spacing:-.8px;margin:12px 0 14px}
.article .standfirst{font-family:var(--serif);font-size:20px;color:var(--muted);line-height:1.55;margin-bottom:8px}
.byline{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted);padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:18px 0 8px}
.byline .avatar{width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.article-body{font-size:18px;line-height:1.8;color:#2b2721}
.article-body p{margin:1.15em 0}
.article-body h2{font-size:26px;letter-spacing:-.4px;margin:1.6em 0 .6em;line-height:1.3}
.article-body h3{font-size:21px;margin:1.4em 0 .5em}
.article-body ul,.article-body ol{margin:1em 0 1em 1.3em}
.article-body li{margin:.55em 0}
.article-body blockquote{border-left:4px solid var(--brand);background:#fdf6ec;padding:16px 20px;border-radius:0 12px 12px 0;margin:1.6em 0;font-family:var(--serif);font-size:19px;font-style:italic}
.article-body .punch{background:#1c1a17;color:#fff;border-radius:14px;padding:22px 24px;margin:1.8em 0}
.article-body .punch strong{color:var(--accent)}
.article-body img.inline{border-radius:12px;margin:1.4em 0}
.dropcap::first-letter{font-size:3.4em;float:left;line-height:.9;padding-right:10px;font-weight:800;color:var(--brand)}
.share-row{display:flex;gap:10px;margin:26px 0;flex-wrap:wrap;align-items:center}
.share-row span{font-weight:700;font-size:14px}
.share-btn{padding:10px 18px;border-radius:999px;font-size:14px;font-weight:700;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.share-btn:hover{border-color:var(--brand);color:var(--brand)}
.author-box{display:flex;gap:16px;background:#f6f1e7;border-radius:14px;padding:20px;margin-top:26px}
.author-box .avatar{width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;flex-shrink:0}

/* sidebar */
.sidebar{position:sticky;top:84px;display:flex;flex-direction:column;gap:20px}
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.widget h4{font-size:15px;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;color:var(--muted)}
.widget ul{list-style:none}
.widget li{margin:10px 0;font-size:15px;font-weight:600}
.widget li a:hover{color:var(--brand)}
.newsletter input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;margin-bottom:10px}
.newsletter button{width:100%}

/* ---------- ad slots: placeholder look only while empty; hugs the creative once loaded ---------- */
.ad-slot{display:block;text-align:center;margin:22px auto;padding:0;max-width:100%;overflow:hidden}
.ad-slot .ad-label{display:block;font-size:10px;letter-spacing:2px;color:#b3a88f;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.ad-slot:not(.ad-loaded){background:#f1ece1;border:1.5px dashed #cfc4ae;border-radius:10px;min-height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px}
.ad-slot:not(.ad-loaded) .ad-label{margin-bottom:0}
.ad-slot.leader:not(.ad-loaded){max-width:728px}
.ad-slot.box:not(.ad-loaded){min-height:250px;max-width:300px}
.ad-slot.skyscraper:not(.ad-loaded){min-height:600px;max-width:300px}
.ad-slot.ad-loaded{background:transparent;border:none;min-height:0;min-width:0;padding:0}
.ad-slot iframe{max-width:100%;display:block;margin:0 auto;border:0}
/* fixed 728x90 Adsterra banners overflow small viewports (horizontal scroll on phones); hide on mobile — 300x250 + native + Social Bar still monetize mobile traffic */
@media(max-width:760px){.ad-slot.leader{display:none}}

/* ---------- newsletter band ---------- */
.band{background:var(--ink);color:#fff;border-radius:22px;padding:44px clamp(24px,5vw,60px);display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center;margin:20px 0 0}
@media(max-width:800px){.band{grid-template-columns:1fr}}
.band h2{font-size:clamp(24px,3.4vw,36px);letter-spacing:-.5px;margin-bottom:10px}
.band p{color:#cfc4b5}
.band form{display:flex;gap:10px}
@media(max-width:520px){.band form{flex-direction:column}}
.band input{flex:1;padding:14px 18px;border-radius:999px;border:0;font-size:15px}

/* ---------- footer ---------- */
.site-footer{background:#141210;color:#b9ae9c;margin-top:60px;padding:50px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.site-footer h5{color:#fff;font-size:14px;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
.site-footer ul{list-style:none}
.site-footer li{margin:9px 0;font-size:14.5px}
.site-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid #2c2822;padding-top:20px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}

/* ---------- misc pages ---------- */
.page{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,4vw,48px);margin:30px 0}
.page h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.6px;margin-bottom:16px}
.page h2{font-size:22px;margin:1.5em 0 .6em}
.page p{margin:1em 0;color:#3a352d}
.contact-form input,.contact-form textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;font-size:15px;margin:8px 0;font-family:var(--font)}
.contact-form textarea{min-height:140px;resize:vertical}
.trending-strip{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 14px;scrollbar-width:thin}
.trend-card{flex:0 0 240px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.trend-card img{height:130px;width:100%;object-fit:cover}
.trend-card .txt{padding:12px 14px}
.trend-card h4{font-size:14.5px;line-height:1.4}
.trend-num{font-size:26px;font-weight:800;color:var(--brand)}

/* ============ ChuckleChow v2 — engagement components ============ */
.quiz-box{background:linear-gradient(135deg,#fff8ec,#ffeeda);border:2px solid #f0b429;border-radius:16px;padding:26px;margin:30px 0;box-shadow:0 10px 30px rgba(240,180,41,.18)}
.quiz-kicker{font-size:12px;font-weight:800;letter-spacing:2px;color:#b97f0a;margin-bottom:8px}
.quiz-title{font-size:21px;margin:0 0 16px;letter-spacing:-.3px}
.quiz-q{font-size:17px;font-weight:600;margin-bottom:14px}
.quiz-opts{display:grid;gap:10px}
.quiz-opt{text-align:left;background:#fff;border:2px solid var(--line);border-radius:12px;padding:13px 16px;font-size:15px;font-weight:600;cursor:pointer;transition:all .15s}
.quiz-opt:hover:not(:disabled){border-color:var(--brand);transform:translateX(4px)}
.quiz-opt:disabled{cursor:default;opacity:.85}
.quiz-opt.ok{border-color:#1d9d55;background:#e9f9ef}
.quiz-opt.bad{border-color:#e8442e;background:#fdeceb}
.quiz-why{display:none;background:#fff;border-radius:10px;padding:12px 14px;font-size:14.5px;margin-top:14px;border-left:4px solid var(--brand)}
.quiz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.quiz-count{font-size:13px;color:var(--muted);font-weight:700}
.quiz-done{background:#fff;border-radius:12px;padding:20px;margin-top:6px;text-align:center}
.quiz-score{font-size:22px;margin-bottom:8px}
.quiz-share{margin:14px 0;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;font-size:14px;font-weight:700}
.quiz-cta{display:inline-block;margin-top:10px;font-weight:800;color:var(--brand);font-size:15.5px}
.quiz-cta:hover{text-decoration:underline}

.poll-widget{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;margin:26px 0}
.poll-q{font-weight:800;font-size:16px;margin-bottom:12px}
.poll-opts{display:flex;gap:10px;flex-wrap:wrap}
.poll-btn{background:#fff;border:2px solid var(--line);border-radius:999px;padding:10px 18px;font-size:20px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .15s}
.poll-btn small{font-size:13px;font-weight:700;color:var(--muted)}
.poll-btn:hover{border-color:var(--brand);transform:translateY(-2px)}
.poll-bar{display:grid;grid-template-columns:150px 1fr 46px;gap:10px;align-items:center;font-size:13.5px;margin:8px 0}
.poll-track{background:#eee7d6;border-radius:99px;height:10px;overflow:hidden}
.poll-fill{background:linear-gradient(90deg,var(--brand),#f0b429);height:100%;border-radius:99px;transition:width .6s}
.poll-thanks{margin-top:10px;font-size:14px;color:var(--muted)}

.sticky-next{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;background:#1c1a17;color:#fff;border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 14px 40px rgba(0,0,0,.35);transform:translateY(140%);transition:transform .35s ease;max-width:640px;margin:0 auto}
.sticky-next.show{transform:translateY(0)}
.sn-kicker{font-size:10.5px;font-weight:800;letter-spacing:1.5px;color:#f0b429;white-space:nowrap}
.sticky-next img{width:64px;height:44px;object-fit:cover;border-radius:8px;flex:none}
.sn-txt{flex:1;min-width:0}
.sn-txt b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-txt small{color:#cbbfa8;font-size:12px}
.sn-btn{padding:9px 18px;font-size:13.5px;white-space:nowrap}
.sn-x{background:none;border:0;color:#8d8471;font-size:24px;cursor:pointer;line-height:1;padding:4px}

.exit-ov{position:fixed;inset:0;background:rgba(20,18,15,.72);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px;animation:fadein .25s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.exit-modal{background:#fff;border-radius:18px;max-width:440px;width:100%;padding:26px;position:relative;text-align:center;animation:pop .3s}
@keyframes pop{from{transform:scale(.92)}to{transform:scale(1)}}
.exit-x{position:absolute;top:10px;right:14px;background:none;border:0;font-size:26px;cursor:pointer;color:#999}
.exit-kicker{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--brand);margin-bottom:12px}
.exit-modal img{width:100%;height:180px;object-fit:cover;border-radius:12px;margin-bottom:14px}
.exit-modal h3{font-size:19px;margin-bottom:8px}
.exit-modal h3 a{color:inherit}
.exit-modal p{font-size:14px;color:var(--muted);margin-bottom:16px}

.fq-count{font-size:13px;font-weight:800;color:var(--muted);letter-spacing:1px;margin-bottom:10px}
.fq-bar{background:#eee7d6;border-radius:99px;height:10px;overflow:hidden;margin-bottom:20px}
.fq-fill{background:linear-gradient(90deg,var(--brand),#f0b429);height:100%;border-radius:99px;transition:width .4s}
.fq-q{font-size:20px;margin-bottom:18px}
.fq-opts{display:grid;gap:10px;margin-bottom:10px}
.fq-result{text-align:center;background:linear-gradient(135deg,#fff8ec,#ffeeda);border:2px solid #f0b429;border-radius:16px;padding:30px 24px}
.fq-result img{width:100%;max-height:220px;object-fit:cover;border-radius:12px;margin:14px 0}
.fq-result h3{font-size:24px;margin-bottom:10px}
.fq-result p{font-size:15.5px;color:#4a4438;max-width:52ch;margin:0 auto}

.quiz-promo{background:linear-gradient(135deg,#1c1a17,#3a2c14);border-radius:18px;padding:34px;color:#fff;display:flex;gap:24px;align-items:center;margin:10px 0 34px;flex-wrap:wrap}
.quiz-promo .qp-txt{flex:1;min-width:240px}
.quiz-promo h2{color:#fff;font-size:24px;margin-bottom:10px}
.quiz-promo p{color:#d8cdb4;font-size:15px;margin-bottom:18px}
.qp-emoji{font-size:64px;flex:none}
@media(max-width:640px){
  .poll-bar{grid-template-columns:110px 1fr 40px}
  .sn-txt b{font-size:12.5px}
  .quiz-box{padding:18px}
}

/* bonus box (Smartlink) */
.bonus-box{background:linear-gradient(135deg,#1c1a17,#3a2c14);border-radius:14px;padding:24px;margin:26px 0;text-align:center;color:#fff}
.bonus-kicker{font-size:11.5px;font-weight:800;letter-spacing:2px;color:#f0b429;margin-bottom:8px}
.bonus-box p{color:#d8cdb4;font-size:14.5px;margin-bottom:16px}

/* cookie consent banner */
.cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:999;background:#1c1a17;color:#fff;border-radius:12px;padding:14px 18px;display:flex;gap:14px;align-items:center;justify-content:space-between;box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:14px}
.cookie-banner[hidden]{display:none}
.cookie-banner p{margin:0;color:#d8cdb4}
.cookie-banner a{color:#f0b429}
.cookie-banner .btn{white-space:nowrap;padding:8px 18px;font-size:14px}
/* footer disclaimer */
.foot-note{font-size:11.5px;opacity:.65}

/* Facebook follow box (hub pages + article sidebars) */
.fb-box{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#eef4ff,#e2ebfd);border:2px solid #b9cdf3;border-radius:14px;padding:20px 22px;margin:28px 0}
.fb-box-icon{font-size:34px}
.fb-box-txt{flex:1}
.fb-box-txt strong{font-size:17px}
.fb-box-txt p{margin:4px 0 0;color:var(--muted);font-size:14.5px}
.fb-box .btn{white-space:nowrap}
.fb-box-side{flex-direction:column;text-align:center;padding:18px}
.fb-box-side .btn{width:100%}

/* ---------- sources box ---------- */
.sources-box{background:#f7f4ec;border:1px solid #e5ddc9;border-radius:10px;padding:16px 20px;margin:28px 0;font-size:14.5px}
.sources-box h3{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#a89c83;margin-bottom:10px}
.sources-box ul{margin:0;padding-left:20px}
.sources-box li{margin-bottom:6px;color:#5c5546}

/* ---------- video embed ---------- */
.watch-box{background:#1c1a17;color:#f5efe2;border-radius:14px;padding:28px;margin:32px 0}
.watch-box h2{color:#fff;margin-bottom:10px}
.watch-box p{color:#d8cdb4}
.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;margin:18px 0 12px;background:#000}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.video-credit{font-size:13px;color:#a89c83;margin:0}
.video-credit a{color:#f0b429}