/*
Theme Name: Discovery Lite
Theme URI: https://github.com/discovery-team/discovery-lite
Author: Discovery Team
Author URI: https://github.com/discovery-team
Description: Ultra-light, mobile-first blog/news theme engineered for Google Discover. Infinite article feed, AI summary cards, read-more collapse, emoji reactions, voted comments, trending carousel, Beeps short-news cards, ad slots, emoji reactions and a built-in translation layer. No jQuery, no webfonts, no build step.
Version: 1.4.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: discovery-lite
Tags: blog, news, one-column, custom-menu, custom-logo, custom-colors, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root{
	--dsc-accent:#6d28d9;
	--dsc-accent-ink:#fff;
	--dsc-ink:#111418;
	--dsc-ink-2:#474c52;
	--dsc-ink-3:#6b7177;
	--dsc-line:#e4e7ea;
	--dsc-bg:#fff;
	--dsc-bg-2:#f6f7f9;
	--dsc-bg-3:#eef1f5;
	--dsc-radius:14px;
	--dsc-radius-sm:9px;
	--dsc-wrap:720px;
	--dsc-wrap-wide:1140px;
	--dsc-gap:16px;
	--dsc-font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	--dsc-font-head:Georgia,"Iowan Old Style","Times New Roman",serif;
	--dsc-title-scale:1;
	--dsc-body-size:1.075rem;
	--dsc-lh:1.62;
	--dsc-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px -12px rgba(16,24,40,.18);
	--dsc-header-h:56px;
}
[data-dsc-fonts="sans"]{--dsc-font-head:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
[data-dsc-fonts="serif"]{--dsc-font-body:Georgia,"Iowan Old Style","Times New Roman",serif}

@media (prefers-color-scheme:dark){
	:root[data-dsc-scheme="auto"]{
		color-scheme:dark;
		--dsc-ink:#e8eaed;--dsc-ink-2:#b6bbc1;--dsc-ink-3:#9aa0a6;
		--dsc-line:#2b2f34;--dsc-bg:#121417;--dsc-bg-2:#191c20;--dsc-bg-3:#22262b;
		--dsc-shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
	}
}
:root[data-dsc-scheme="dark"]{
	color-scheme:dark;
	--dsc-ink:#e8eaed;--dsc-ink-2:#b6bbc1;--dsc-ink-3:#9aa0a6;
	--dsc-line:#2b2f34;--dsc-bg:#121417;--dsc-bg-2:#191c20;--dsc-bg-3:#22262b;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
/* A class that sets `display` outranks the browser's own [hidden] rule, so any
   element toggled by the `hidden` attribute would stay visible. Enforce it once
   here instead of remembering it at every call site. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
	margin:0;background:var(--dsc-bg);color:var(--dsc-ink);
	font-family:var(--dsc-font-body);font-size:var(--dsc-body-size);line-height:var(--dsc-lh);
	-webkit-font-smoothing:antialiased;overflow-wrap:break-word;
	/* Sticky footer: a thin page (a tag archive with one post) would otherwise
	   leave the footer floating in the middle of the screen. */
	display:flex;flex-direction:column;min-height:100vh;
}
#dsc-main{flex:1 0 auto}
.dsc-footer{margin-top:auto}
img,video,iframe,svg{max-width:100%;height:auto}
img{display:block}
a{color:var(--dsc-accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--dsc-accent);outline-offset:2px;border-radius:4px}
button{font:inherit;color:inherit}
/* text-wrap:balance evens out the last line, which reads well on a wide screen
   and badly on a phone: with 3–4 words per line it produces short ragged rows.
   Phones get `pretty` (only avoids orphans), desktops get `balance`. */
h1,h2,h3,h4{font-family:var(--dsc-font-head);line-height:1.16;letter-spacing:-.015em;margin:1.6em 0 .5em;text-wrap:pretty;overflow-wrap:break-word}
@media (min-width:700px){h1,h2,h3,h4{text-wrap:balance}}
p,ul,ol,blockquote,figure,table{margin:0 0 1.15em}
figure{margin-inline:0}
hr{border:0;border-top:1px solid var(--dsc-line);margin:2em 0}
blockquote{border-left:2px solid var(--dsc-line);padding:.2em 0 .2em 1.1em;margin-left:0;color:var(--dsc-ink-2);font-style:italic}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
pre{background:var(--dsc-bg-2);padding:1em;border-radius:var(--dsc-radius-sm);overflow:auto}
table{border-collapse:collapse;width:100%}
th,td{border:1px solid var(--dsc-line);padding:.5em .7em;text-align:start}

.dsc-wrap{width:100%;max-width:var(--dsc-wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.dsc-wrap--wide{max-width:var(--dsc-wrap-wide)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.dsc-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--dsc-bg);color:var(--dsc-ink);padding:12px 18px;border-radius:0 0 var(--dsc-radius-sm) 0}
.dsc-skip:focus{left:0}

/* ==========================================================================
   3. Header / nav
   ========================================================================== */
.dsc-header{position:sticky;top:0;z-index:40;background:var(--dsc-bg);border-bottom:1px solid var(--dsc-line)}
.dsc-header__bar{display:flex;align-items:center;gap:12px;min-height:var(--dsc-header-h);max-width:var(--dsc-wrap-wide);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}

/* centred masthead: logo + tagline above the menu bar */
.dsc-masthead{text-align:center;padding:22px 16px 14px}
.dsc-masthead__logo img{margin-inline:auto;max-height:calc(var(--dsc-logo-h,44px) * 1.9);width:auto;object-fit:contain}
.dsc-masthead__name{display:inline-block;font-family:var(--dsc-font-head);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;color:var(--dsc-ink);text-decoration:none}
.dsc-masthead__tagline{margin:8px 0 0;font-size:.92rem;color:var(--dsc-ink-3)}
.dsc-head-centered .dsc-header{position:static}
.dsc-head-centered .dsc-header__bar{background:var(--dsc-nav-bg,transparent);color:var(--dsc-nav-ink,inherit);max-width:none;position:sticky;top:0;z-index:40}
.dsc-head-centered .dsc-header__bar .dsc-iconbtn{color:var(--dsc-nav-ink,var(--dsc-ink))}
/* Centring only makes sense once the menu is on screen; on mobile the bar is
   burger-left / icons-right like the compact layout. */
@media (min-width:900px){
	.dsc-head-centered .dsc-header__bar{justify-content:center}
	.dsc-head-centered .dsc-header__spacer{flex:0}
	/* The nav fills the bar, so centring has to happen inside the list. */
	.dsc-head-centered .dsc-nav__menu{justify-content:center}
	/* The logo already sits in the masthead above — the second row does not grow
	   with it. */
	.dsc-head-centered .dsc-header__bar{min-height:56px}
	/* Still scrollable in the extreme case, with a visible scrollbar. */
	.dsc-nav{scrollbar-width:thin}
	.dsc-nav::-webkit-scrollbar{display:block;height:6px}
	.dsc-nav::-webkit-scrollbar-thumb{background:var(--dsc-line);border-radius:3px}
}
/* In the centred layout the masthead scrolls away on a phone; without this the
   sticky bar is a burger and two icons with nothing identifying the site. */
/* Full-width top bar: the wrapper limit is dropped, the safe-area padding stays. */
.dsc-head-full .dsc-header__bar,.dsc-head-full .dsc-rail__inner{max-width:none}

.dsc-brand--mini{font-size:1.05rem;font-weight:800;font-family:var(--dsc-font-head);color:var(--dsc-nav-ink,var(--dsc-ink));text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:900px){.dsc-brand--mini{display:none}}

/* desktop horizontal menu — the burger is mobile-only */
.dsc-nav{display:none;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.dsc-nav::-webkit-scrollbar{display:none}
.dsc-has-nav .dsc-brand{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.dsc-nav__menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.dsc-nav__menu li{position:relative}
/* --dsc-nav-size is set by JS when the menu has to shrink to stay on one bar. */
.dsc-nav__menu a{display:block;padding:10px clamp(7px,0.7vw,12px);font-size:var(--dsc-nav-size,.9rem);font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--dsc-nav-ink,var(--dsc-ink));text-decoration:none;white-space:nowrap;border-radius:8px}
.dsc-nav__menu a:hover{background:rgba(127,127,127,.14)}
.dsc-nav__menu .current-menu-item>a{text-decoration:underline;text-underline-offset:5px}
.dsc-nav__menu .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:220px;background:var(--dsc-bg);border:1px solid var(--dsc-line);border-radius:var(--dsc-radius-sm);box-shadow:var(--dsc-shadow);padding:6px;list-style:none;margin:0;z-index:50}
.dsc-nav__menu li:hover>.sub-menu,.dsc-nav__menu li:focus-within>.sub-menu{display:block}
.dsc-nav__menu .sub-menu a{color:var(--dsc-ink);text-transform:none;font-weight:600}
/* A menu too wide to sit beside the logo drops onto its own full-width row —
   the class is set in JS after measuring. Declared after .dsc-has-nav and with
   the bar's own class in the selector, so the spacer really does push the bell
   and the search icon to the right edge. */
@media (min-width:900px){
	.dsc-header__bar.dsc-bar--stack{flex-wrap:wrap;padding-bottom:0;row-gap:0}
	.dsc-header__bar.dsc-bar--stack .dsc-header__spacer{flex:1 1 auto}
	.dsc-header__bar.dsc-bar--stack .dsc-nav{flex:1 0 100%;order:9;width:100%;min-width:0;max-width:100%;border-top:1px solid var(--dsc-line);overflow:visible}
	/* Wrapping beats scrolling: a centred overflow strip cuts BOTH ends and
	   nothing tells the reader the rest exists. */
	.dsc-header__bar.dsc-bar--stack .dsc-nav__menu{flex-wrap:wrap;justify-content:center;padding:3px 0;row-gap:0}
	.dsc-header__bar.dsc-bar--stack .dsc-nav__menu a{padding:9px 10px;font-size:.85rem;letter-spacing:0;white-space:normal;text-align:center}
}

@media (min-width:900px){
	/* Selector is deliberately specific: .dsc-iconbtn sets display later in the
	   file, and an equally specific rule here would lose to it. */
	.dsc-header__bar .dsc-burger{display:none}
	.dsc-nav{display:block}
	/* Only once the menu is actually visible does it take the free space; on
	   mobile the spacer must keep pushing the icons to the right edge. */
	.dsc-has-nav .dsc-header__spacer{flex:0 0 8px}
	.dsc-head-centered .dsc-header__bar{height:52px}
	/* The auto category rail repeats the primary menu on desktop — drop it.
	   A hand-assigned "Category rail" menu is different content, so it stays. */
	.dsc-auto-rail.dsc-has-nav .dsc-rail{display:none}
}
.dsc-brand{display:flex;align-items:center;gap:8px;font-family:var(--dsc-font-head);font-weight:700;font-size:1.22rem;letter-spacing:-.02em;color:var(--dsc-ink);text-decoration:none;white-space:nowrap}
.dsc-brand img,.dsc-brand .custom-logo{max-height:var(--dsc-logo-h,44px);width:auto;object-fit:contain}
.dsc-header__spacer{flex:1}
.dsc-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:none;border-radius:50%;cursor:pointer;color:var(--dsc-ink);flex:none}
.dsc-iconbtn:hover{background:var(--dsc-bg-2)}
.dsc-iconbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* "Prefer this source in Google" — a bare bell reads as a notifications bell,
   so it carries a word on anything wider than a phone. */
.dsc-follow{display:inline-flex;align-items:center;gap:6px;flex:none;height:36px;padding:0 12px;border:1px solid var(--dsc-line);border-radius:999px;color:var(--dsc-ink);text-decoration:none;font-size:.85rem;font-weight:700;white-space:nowrap}
.dsc-follow:hover{border-color:currentColor}
.dsc-follow svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dsc-follow__label{display:none}
@media (min-width:600px){.dsc-follow__label{display:inline}}
.dsc-head-centered .dsc-follow{color:var(--dsc-nav-ink,var(--dsc-ink));border-color:currentColor}

/* category rail — horizontal scroll like Discover / TOI */
.dsc-rail{border-bottom:1px solid var(--dsc-line);background:var(--dsc-bg)}
.dsc-rail__inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;max-width:var(--dsc-wrap-wide);margin-inline:auto;padding:0 12px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.dsc-rail__inner::-webkit-scrollbar{display:none}
.dsc-rail a{flex:none;scroll-snap-align:start;padding:11px 12px;font-size:.95rem;font-weight:600;color:var(--dsc-ink-2);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.dsc-rail a:hover{color:var(--dsc-ink)}
.dsc-rail a[aria-current],.dsc-rail .current-menu-item>a,.dsc-rail .current-menu-parent>a{color:var(--dsc-accent);border-bottom-color:var(--dsc-accent)}
.dsc-rail__inner ul,.dsc-rail__inner li{display:contents;list-style:none;margin:0;padding:0}

/* slide-in menu */
.dsc-drawer{position:fixed;inset:0 auto 0 0;width:min(86vw,340px);background:var(--dsc-bg);z-index:60;transform:translateX(-102%);transition:transform .22s ease;padding:14px;padding-left:max(14px,env(safe-area-inset-left));padding-bottom:max(14px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;border-right:1px solid var(--dsc-line)}
.dsc-drawer[data-open]{transform:none}
.dsc-drawer ul{list-style:none;margin:0;padding:0}
.dsc-drawer li a{display:block;padding:12px 10px;border-radius:var(--dsc-radius-sm);color:var(--dsc-ink);text-decoration:none;font-weight:600}
.dsc-drawer li a:hover{background:var(--dsc-bg-2)}
.dsc-drawer .sub-menu a{padding-left:24px;font-weight:400;color:var(--dsc-ink-2)}
.dsc-scrim{position:fixed;inset:0;background:rgba(6,10,16,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
.dsc-scrim[data-open]{opacity:1;pointer-events:auto}

/* search sheet */
.dsc-searchsheet{display:none;border-bottom:1px solid var(--dsc-line);background:var(--dsc-bg-2);padding:10px 0}
.dsc-searchsheet[data-open]{display:block}
/* Same track as the header bar: the field starts under the logo and ends under
   the search icon, whatever the article width is set to. */
.dsc-searchform{display:flex;gap:8px;max-width:var(--dsc-wrap-wide);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.dsc-searchform input[type=search]{flex:1;min-width:0;border:1px solid var(--dsc-line);background:var(--dsc-bg);color:var(--dsc-ink);border-radius:999px;padding:11px 16px;font-size:1rem}
.dsc-searchform button{border:0;background:var(--dsc-accent);color:var(--dsc-accent-ink);border-radius:999px;padding:0 18px;font-weight:600;cursor:pointer}

/* The WP admin bar is fixed at the top for logged-in users, so everything
   sticky has to start below it. */
.admin-bar .dsc-header,
.admin-bar .dsc-head-centered .dsc-header__bar{top:32px}
.admin-bar .dsc-tocbar{top:calc(var(--dsc-header-real,var(--dsc-header-h)) + 32px)}
.admin-bar .dsc-progress{top:32px}
@media screen and (max-width:782px){
	.admin-bar .dsc-header,
	.admin-bar .dsc-head-centered .dsc-header__bar{top:46px}
	.admin-bar .dsc-tocbar{top:calc(var(--dsc-header-real,var(--dsc-header-h)) + 46px)}
	.admin-bar .dsc-progress{top:46px}
}

/* reading progress */
.dsc-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--dsc-accent);z-index:50;will-change:transform}

/* ==========================================================================
   4. Cards / grids
   ========================================================================== */
.dsc-section{margin:28px 0}
.dsc-section__head{display:flex;align-items:baseline;gap:10px;margin:0 0 14px}
.dsc-section__title{font-size:1.28rem;margin:0;letter-spacing:-.02em}
.dsc-section__more{margin-left:auto;font-size:.9rem;font-weight:600;text-decoration:none}

.dsc-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:700px){.dsc-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.dsc-grid--3{grid-template-columns:repeat(var(--dsc-cols,3),1fr)}}

/* overlay cards — headline on the image with a category badge */
.dsc-card--overlay{position:relative;border-radius:var(--dsc-radius);overflow:hidden;min-height:280px;gap:0}
.dsc-card--overlay .dsc-card__media{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.dsc-card--overlay>div{position:relative;z-index:1;margin-top:auto;padding:16px;color:#fff;background:linear-gradient(to top,rgba(8,10,14,.86),rgba(8,10,14,.55) 55%,transparent)}
.dsc-card--overlay .dsc-card__title a,.dsc-card--overlay .dsc-card__meta,.dsc-card--overlay .dsc-card__excerpt{color:#fff}
.dsc-card--overlay .dsc-card__meta{opacity:.85}
.dsc-card--overlay .dsc-card__badge{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--dsc-accent);color:var(--dsc-accent-ink);padding:4px 9px;border-radius:5px;margin-bottom:9px;text-decoration:none}
.dsc-card--overlay.dsc-card--hero{min-height:420px}
@media (min-width:700px){.dsc-card--overlay.dsc-card--hero{flex-direction:column}.dsc-card--overlay.dsc-card--hero .dsc-card__media{flex:none}}

.dsc-card{display:flex;flex-direction:column;gap:10px;min-width:0}
.dsc-card__media{position:relative;display:block;border-radius:var(--dsc-radius);overflow:hidden;background:var(--dsc-bg-3);aspect-ratio:var(--dsc-card-ratio,16/9)}
.dsc-card__media img{width:100%;height:100%;object-fit:cover}
.dsc-card__src{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--dsc-ink-3);font-weight:600}
.dsc-card__srcicon{width:20px;height:20px;border-radius:50%;background:var(--dsc-bg-3);display:grid;place-items:center;font-size:.7rem;color:var(--dsc-ink-2);flex:none;font-weight:700}
/* Titles and excerpts are clamped so every card in a row ends at the same
   height — a two-line headline next to a five-line one is what makes a grid
   look thrown together. */
.dsc-card__title{font-size:1.22rem;margin:0;line-height:1.25;font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dsc-card__title a{color:var(--dsc-ink);text-decoration:none}
.dsc-card__title a:hover{text-decoration:underline}
.dsc-card__meta{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--dsc-ink-3);margin-top:auto;padding-top:2px}
.dsc-card__excerpt{margin:0;font-size:.96rem;color:var(--dsc-ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dsc-card>div{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.dsc-card--hero .dsc-card__title{font-size:calc(1.72rem * var(--dsc-title-scale));-webkit-line-clamp:4}
.dsc-card--hero .dsc-card__media{aspect-ratio:4/3}
@media (min-width:700px){
	.dsc-card--hero{grid-column:1/-1;flex-direction:row;gap:24px;align-items:center}
	.dsc-card--hero .dsc-card__media{flex:0 0 55%;aspect-ratio:16/9}
	.dsc-card--hero>div{flex:1;justify-content:center;gap:10px}
	.dsc-card--hero .dsc-card__meta{margin-top:4px}
}

/* homepage top block layouts */
.dsc-top .dsc-grid{gap:22px;align-items:stretch}
.dsc-top .dsc-card{height:100%}
@media (min-width:700px){
	.dsc-top--mosaic .dsc-grid{grid-template-columns:2fr 1fr}
	.dsc-top--mosaic .dsc-card:first-child{grid-row:span 2}
	.dsc-top--mosaic .dsc-card--overlay:first-child{min-height:100%}
}
.dsc-intro{max-width:var(--dsc-wrap);margin:26px auto 30px;text-align:center}
.dsc-intro p{font-family:var(--dsc-font-head);font-size:1.25rem;line-height:1.4;color:var(--dsc-ink)}
.dsc-intro p+p{font-family:var(--dsc-font-body);font-size:1rem;color:var(--dsc-ink-2)}
.dsc-footer__text{max-width:var(--dsc-wrap);margin:0 auto 14px;text-align:center;font-size:.9rem}

/* compact list row (What to read next / drawer of related) */
.dsc-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--dsc-line)}
.dsc-row:last-child{border-bottom:0}
.dsc-row__media{flex:0 0 96px;border-radius:var(--dsc-radius-sm);overflow:hidden;aspect-ratio:1/1;background:var(--dsc-bg-3)}
.dsc-row__media img{width:100%;height:100%;object-fit:cover}
.dsc-row__title{font-size:1.02rem;font-weight:700;margin:0;line-height:1.3;font-family:var(--dsc-font-head)}
.dsc-row__title a{color:var(--dsc-ink);text-decoration:none}
.dsc-row__meta{font-size:.78rem;color:var(--dsc-ink-3);margin-top:4px}

/* horizontal carousel (Trending stories / Beeps) */
.dsc-carousel-wrap{position:relative}
.dsc-carousel__btn{position:absolute;top:var(--dsc-arrow-top,38%);transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--dsc-line);background:var(--dsc-bg);color:var(--dsc-ink);box-shadow:var(--dsc-shadow);cursor:pointer;display:grid;place-items:center}
.dsc-carousel__btn:hover{background:var(--dsc-bg-2)}
.dsc-carousel__btn svg{width:22px;height:22px}
.dsc-carousel__btn.is-prev{left:-14px}
.dsc-carousel__btn.is-next{right:-14px}
.dsc-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;overscroll-behavior-x:contain}
.dsc-carousel::-webkit-scrollbar{display:none}
.dsc-carousel>*{scroll-snap-align:start}
@media (min-width:700px){.dsc-carousel{grid-auto-columns:38%}}
@media (min-width:1000px){.dsc-carousel{grid-auto-columns:26%}}
.dsc-trend{display:flex;flex-direction:column;border:1px solid var(--dsc-line);border-radius:var(--dsc-radius);overflow:hidden;background:var(--dsc-bg)}
.dsc-trend__media{display:block;aspect-ratio:16/9;background:var(--dsc-bg-3)}
.dsc-trend__media img{width:100%;height:100%;object-fit:cover}
/* Two clamped lines keep every card the same height and stop the headline
   being pushed out of view by a tall image. */
.dsc-trend__body{display:flex;flex-direction:column;gap:5px;padding:11px 12px 13px;flex:1}
.dsc-trend__title{font-size:.95rem;font-weight:700;margin:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dsc-trend__title a{color:var(--dsc-ink);text-decoration:none}
.dsc-trend__views{font-size:.74rem;color:var(--dsc-ink-3);margin-top:auto;display:flex;gap:6px;align-items:center}

/* ==========================================================================
   5. Single article
   ========================================================================== */
.dsc-article{padding-top:18px}
.dsc-article+.dsc-article{border-top:10px solid var(--dsc-bg-2);margin-top:34px;padding-top:26px}
.dsc-eyebrow{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--dsc-accent-ink);background:var(--dsc-accent);padding:4px 9px;border-radius:5px;text-decoration:none;margin-bottom:12px}
/* The tight tracking is a desktop refinement; at phone sizes it just makes the
   letters collide. */
.dsc-title{font-size:calc(2.05rem * var(--dsc-title-scale));font-weight:800;line-height:1.14;margin:0 0 12px;letter-spacing:-.012em;hyphens:auto}
@media (min-width:700px){.dsc-title{letter-spacing:-.025em;line-height:1.1;hyphens:manual}}
@media (min-width:700px){.dsc-title{font-size:calc(2.65rem * var(--dsc-title-scale))}}
.dsc-dek{font-size:1.08rem;color:var(--dsc-ink-2);margin:0 0 16px;line-height:1.45}
.dsc-byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.87rem;color:var(--dsc-ink-3);margin-bottom:16px}
.dsc-byline__avatar img{border-radius:50%}
.dsc-byline strong{color:var(--dsc-ink)}
.dsc-byline a{color:var(--dsc-ink);text-decoration:none;font-weight:600}
.dsc-byline .sep{opacity:.5}
.dsc-hero{margin:0 0 8px;border-radius:var(--dsc-radius);overflow:hidden;background:var(--dsc-bg-3)}
.dsc-hero img{width:100%;height:auto}
.dsc-caption{font-size:.79rem;color:var(--dsc-ink-3);margin:8px 0 20px}

.dsc-body{font-size:var(--dsc-body-size)}
.dsc-body>h2{font-size:calc(1.55rem * var(--dsc-title-scale));font-weight:800;scroll-margin-top:calc(var(--dsc-header-real,var(--dsc-header-h)) + 60px)}
.dsc-body>h3{font-size:1.22rem;font-weight:700;scroll-margin-top:calc(var(--dsc-header-real,var(--dsc-header-h)) + 60px)}
.dsc-body img{border-radius:var(--dsc-radius-sm)}

/* oEmbeds: the wrapper reserves 16/9 up front (zero layout shift) and the
   player is stretched to fill it — an iframe keeps its own 560x315 otherwise
   and spills past the edge. */
.dsc-embed{display:block;position:relative;width:100%;aspect-ratio:16/9;margin:0 0 1.2em;border-radius:var(--dsc-radius-sm);overflow:hidden;background:var(--dsc-bg-3)}
.dsc-embed>iframe,.dsc-embed>video,.dsc-embed>object,.dsc-embed>embed{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0}
/* Core's responsive-embed support adds its own ratio box (a ::before with
   padding-top plus absolutely positioned iframes) around the same embed. Two
   ratio systems nested inside each other is what squashed the player: ours owns
   the ratio, core's is switched off here. */
.wp-block-embed__wrapper:has(.dsc-embed)::before{content:none}
.wp-block-embed:has(.dsc-embed) .wp-block-embed__wrapper{padding:0;position:static}
.wp-block-embed:has(.dsc-embed){margin-block:0 1.2em}
.wp-embed-aspect-4-3 .dsc-embed{aspect-ratio:4/3}
.wp-embed-aspect-1-1 .dsc-embed{aspect-ratio:1/1}
.wp-embed-aspect-21-9 .dsc-embed{aspect-ratio:21/9}
.wp-embed-aspect-9-16 .dsc-embed{aspect-ratio:9/16;max-width:420px;margin-inline:auto}
/* A raw <iframe> pasted into the editor (or injected by another plugin) never
   passes through the oEmbed filter, so it keeps width=560 height=315. Scaling
   the width without the height is exactly what squashes the player. */
.dsc-body iframe{width:100%;height:auto;aspect-ratio:16/9}
.dsc-body figure.wp-block-embed iframe{width:100%}
.dsc-body figcaption{font-size:.79rem;color:var(--dsc-ink-3);margin-top:6px}
.dsc-body a{color:var(--dsc-accent);font-weight:600}
.dsc-body ul,.dsc-body ol{padding-left:1.25em}
.dsc-body li{margin-bottom:.4em}

/* read-more collapse (AP style) */
.dsc-collapse{position:relative}
.dsc-collapse[data-collapsed]{max-height:var(--dsc-collapse-h,60vh);overflow:hidden}
/* The fade has to be opaque well before the clip line, otherwise the last
   visible line of text gets sliced in half. */
.dsc-collapse[data-collapsed]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:220px;background:linear-gradient(to bottom,transparent,var(--dsc-bg) 62%,var(--dsc-bg));pointer-events:none}
.dsc-readmore{display:flex;justify-content:center;margin:10px 0 26px;position:relative;z-index:1}
.dsc-readmore button{display:inline-flex;align-items:center;gap:9px;background:var(--dsc-ink);color:var(--dsc-bg);border:0;border-radius:999px;padding:14px 26px;font-weight:800;font-size:1rem;cursor:pointer;box-shadow:var(--dsc-shadow)}
.dsc-readmore button:hover{opacity:.9}
.dsc-readmore svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s}
.dsc-readmore button[aria-expanded=true] svg{transform:rotate(180deg)}

/* AI summary — Quick Read (NDTV) / Need to know (People) */
.dsc-summary{border-radius:var(--dsc-radius);padding:2px;margin:20px 0 24px;background:linear-gradient(120deg,#7b5cff,#2f8fff 45%,#00c2a8)}
.dsc-summary__in{background:var(--dsc-bg);border-radius:calc(var(--dsc-radius) - 2px);padding:16px 16px 14px}
.dsc-summary__head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.dsc-summary__spark{width:22px;height:22px;flex:none}
.dsc-summary__label{font-weight:800;font-size:1.02rem;background:linear-gradient(90deg,#7b5cff,#2f8fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.dsc-summary__note{font-size:.74rem;color:var(--dsc-ink-3);display:block;font-weight:400}
.dsc-summary__toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:0;cursor:pointer;color:var(--dsc-ink-3);padding:0}
.dsc-summary__toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.dsc-summary__toggle[aria-expanded=false] svg{transform:rotate(180deg)}
.dsc-summary ul{margin:0;padding-left:1.15em}
.dsc-summary li{margin-bottom:.55em;color:var(--dsc-ink);font-size:1.01rem;line-height:1.45}
.dsc-summary li::marker{color:#7b5cff}
.dsc-summary[hidden]{display:none}
/* "NEED TO KNOW" variant — square hard-edged box, copied from People.com reference (IMG#13) */
.dsc-summary--plain{background:none;padding:0;border:2px solid var(--dsc-ink);border-radius:0}
.dsc-summary--plain .dsc-summary__in{border-radius:0}
.dsc-summary--plain .dsc-summary__label{background:none;color:var(--dsc-ink);-webkit-text-fill-color:currentColor;letter-spacing:.06em;text-transform:uppercase}

/* table of contents — H2 chips (In this story) */
.dsc-toc{border:1px solid var(--dsc-line);border-radius:var(--dsc-radius);margin:0 0 22px;background:var(--dsc-bg)}
.dsc-toc__btn{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:14px 16px;font-weight:800;font-size:1.05rem;cursor:pointer;text-align:start;font-family:var(--dsc-font-head)}
.dsc-toc__btn svg{margin-left:auto;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.dsc-toc__btn[aria-expanded=false] svg{transform:rotate(180deg)}
.dsc-toc ol{list-style:none;margin:0;padding:0 16px 14px}
.dsc-toc li{margin:0}
.dsc-toc a{display:block;padding:9px 0;color:var(--dsc-ink);text-decoration:none;border-top:1px solid var(--dsc-line);font-size:1rem}
.dsc-toc a:hover{color:var(--dsc-accent)}
/* sticky H2 tab strip */
/* --dsc-header-real is the measured height of whatever is actually sticky
   (JS): with the menu on its own row the header is taller than the logo, and a
   fixed offset would slide this bar underneath it. */
/* Fixed, not sticky, and shown by sliding rather than by display:block. A
   sticky bar that appears mid-scroll adds ~45px to the flow and shoves the
   article down under the finger — that was the judder on mobile. */
.dsc-tocbar{position:fixed;left:0;right:0;top:var(--dsc-header-real,var(--dsc-header-h));z-index:30;background:var(--dsc-bg);border-bottom:1px solid var(--dsc-line);transform:translateY(-115%);transition:transform .18s ease;will-change:transform}
.dsc-tocbar[data-visible]{transform:none}
@media (prefers-reduced-motion:reduce){.dsc-tocbar{transition:none}}
/* Same track and the same 16px gutter as the header and the article, so the
   first tab starts exactly under the logo. */
.dsc-tocbar__in{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;max-width:var(--dsc-wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.dsc-tocbar__in::-webkit-scrollbar{display:none}
.dsc-tocbar a{flex:none;padding:11px 12px;font-size:.93rem;font-weight:700;color:var(--dsc-ink-3);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.dsc-tocbar a[aria-current]{color:var(--dsc-ink);border-bottom-color:var(--dsc-ink)}

/* inline related card (cronista style) */
.dsc-inline{display:flex;gap:12px;align-items:center;border:1px solid var(--dsc-line);border-radius:var(--dsc-radius);overflow:hidden;margin:26px 0;background:var(--dsc-bg-2);text-decoration:none}
.dsc-inline__media{flex:0 0 92px;aspect-ratio:1/1;background:var(--dsc-bg-3)}
.dsc-inline__media img{width:100%;height:100%;object-fit:cover}
.dsc-inline__txt{padding:10px 14px 10px 0;font-size:.98rem;color:var(--dsc-ink);line-height:1.35}
.dsc-inline__kicker{color:var(--dsc-accent);font-weight:800;margin-right:5px}

/* tag pills — Read More: */
.dsc-tags{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:24px 0}
.dsc-tags__label{font-family:var(--dsc-font-head);font-weight:700;font-size:1.05rem;margin-right:2px}
.dsc-tag{display:inline-block;border:1.5px solid var(--dsc-ink);border-radius:999px;padding:7px 16px;font-size:.92rem;color:var(--dsc-ink);text-decoration:none;line-height:1.3}
.dsc-tag:hover{background:var(--dsc-ink);color:var(--dsc-bg)}
.dsc-tag--solid{background:var(--dsc-bg-3);border-color:transparent}
.dsc-tag--accent{border-color:var(--dsc-accent);color:var(--dsc-accent)}
.dsc-tag--accent:hover{background:var(--dsc-accent);color:var(--dsc-accent-ink)}

/* reactions */
.dsc-react{border:1px solid var(--dsc-line);background:var(--dsc-bg-2);border-radius:var(--dsc-radius);padding:14px;margin:26px 0}
.dsc-react__q{font-weight:700;margin:0 0 12px;font-size:1rem;display:flex;align-items:center;gap:8px}
/* Buttons keep their own size and wrap; stretching five of them across a narrow
   phone made the row look pulled apart. */
.dsc-react__list{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.dsc-react__list>li{flex:0 1 92px}
.dsc-react__btn{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;cursor:pointer;padding:8px 4px;border-radius:var(--dsc-radius-sm);width:100%;min-width:0}
.dsc-react__btn:hover{background:var(--dsc-bg-3)}
.dsc-react__btn[aria-pressed=true]{background:var(--dsc-bg-3);box-shadow:inset 0 0 0 2px var(--dsc-accent)}
.dsc-react__emoji{font-size:1.85rem;line-height:1;transition:transform .15s}
.dsc-react__btn:hover .dsc-react__emoji{transform:scale(1.16)}
.dsc-react__lbl{font-size:.75rem;color:var(--dsc-ink-3);text-align:center;line-height:1.15}
.dsc-react__count{font-size:.74rem;font-weight:700;color:var(--dsc-ink-2)}
.dsc-react__thanks{font-size:.85rem;color:var(--dsc-ink-3);margin:10px 0 0}

/* reaction pill bar (above the lead image) */
.dsc-pills{position:relative;margin:0 0 16px}
.dsc-pills__list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
/* Beats the .dsc-react__btn sizing the same element also carries. */
.dsc-pills__list>li{flex:0 0 auto}
.dsc-pills .dsc-pill{flex:0 0 auto;width:auto}
/* flex-direction and flex are reset because the pill also carries .dsc-react__btn,
   which stacks its children for the big end-of-article block. */
.dsc-pill{display:inline-flex;flex-direction:row;flex:0 0 auto;align-items:center;gap:6px;height:40px;padding:0 13px;border:1px solid var(--dsc-line);background:var(--dsc-bg-2);border-radius:999px;cursor:pointer;font-size:.85rem;line-height:1;color:var(--dsc-ink)}
.dsc-pill:hover{border-color:var(--dsc-ink-3);background:var(--dsc-bg-3)}
.dsc-pill__emoji{font-size:1.15rem;line-height:1}
.dsc-pill__count{font-weight:700;font-variant-numeric:tabular-nums;color:var(--dsc-ink-2)}
.dsc-pill__count:empty{display:none}
.dsc-pill--more{color:var(--dsc-ink-3);gap:5px}
.dsc-pill__label{font-weight:600}

/* One reaction per visitor: after voting the choice stays lit and the rest
   stop responding, instead of silently doing nothing on click. */
.dsc-pill[aria-pressed=true]{background:var(--dsc-accent);border-color:var(--dsc-accent);color:var(--dsc-accent-ink)}
.dsc-pill[aria-pressed=true] .dsc-pill__count{color:inherit}
/* Voting never locks the row: readers change their mind and the server moves the
   vote instead of counting a second one. */
.dsc-pills[data-voted] .dsc-pill:not([aria-pressed=true]){opacity:1}

/* Picker floats under the "more" chip rather than pushing the page around. */
.dsc-pills__picker{position:absolute;top:calc(100% + 8px);left:0;z-index:20;display:flex;flex-wrap:wrap;gap:4px;max-width:min(420px,92vw);padding:8px;border:1px solid var(--dsc-line);border-radius:16px;background:var(--dsc-bg);box-shadow:var(--dsc-shadow)}
.dsc-pills__pick{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:12px;cursor:pointer;font-size:1.4rem;line-height:1}
.dsc-pills__pick:hover{background:var(--dsc-bg-2)}
.dsc-pills__pick[aria-pressed=true]{background:var(--dsc-bg-3);box-shadow:inset 0 0 0 2px var(--dsc-accent)}
.dsc-pills__pick .dsc-pill__emoji{font-size:1.4rem}
.dsc-pills__pick .dsc-pill__count{position:absolute;right:2px;bottom:1px;font-size:.65rem;color:var(--dsc-ink-3)}

/* share row */
.dsc-share{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:22px 0}
.dsc-share__lbl{font-size:.82rem;font-weight:700;color:var(--dsc-ink-3);text-transform:uppercase;letter-spacing:.06em}
.dsc-share a,.dsc-share button{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:11px;border:1.5px solid var(--dsc-line);background:var(--dsc-bg);cursor:pointer;color:var(--dsc-ink)}
.dsc-share a:hover,.dsc-share button:hover{border-color:currentColor}
.dsc-share svg{width:20px;height:20px}
.dsc-share .is-fb{color:#1877f2}.dsc-share .is-x{color:var(--dsc-ink)}.dsc-share .is-wa{color:#25d366}
.dsc-share .is-tg{color:#2aabee}.dsc-share .is-pin{color:#e60023}.dsc-share .is-gn{color:#4285f4}

/* sticky bottom share bar (mobile, cronista) */
.dsc-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--dsc-bg);border-top:1px solid var(--dsc-line);display:flex;align-items:center;gap:10px;padding:8px 12px;transform:translateY(110%);transition:transform .22s ease;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.dsc-stickybar[data-visible]{transform:none}
.dsc-stickybar__title{flex:1;min-width:0;font-size:.85rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:900px){.dsc-stickybar{display:none}}

/* author box */
.dsc-author{display:flex;gap:14px;border:1px solid var(--dsc-line);border-radius:var(--dsc-radius);padding:16px;margin:30px 0;background:var(--dsc-bg-2)}
.dsc-author__avatar{flex:none}
.dsc-author__avatar img{border-radius:50%}
.dsc-author__name{font-size:1.06rem;font-weight:800;margin:0 0 2px;font-family:var(--dsc-font-head)}
.dsc-author__name a{color:var(--dsc-ink);text-decoration:none}
.dsc-author__role{font-size:.76rem;color:var(--dsc-ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:0 0 7px}
.dsc-author__bio{font-size:.93rem;color:var(--dsc-ink-2);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dsc-author__bio[data-open]{-webkit-line-clamp:unset;display:block}
.dsc-author__more{margin-top:4px;padding:0;border:0;background:none;cursor:pointer;font-size:.85rem;font-weight:700;color:var(--dsc-accent);text-decoration:underline;text-underline-offset:3px}
.dsc-author__links{display:flex;gap:12px;margin-top:8px;font-size:.85rem}

/* google news / subscribe CTA */
/* Gradient ring via two background layers: the flat fill is clipped to the
   padding box, the moving gradient to the border box. A pseudo-element with a
   negative z-index would paint over the fill, not behind it. */
.dsc-gnews{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:24px 0;text-decoration:none;color:var(--dsc-ink);
	border:2px solid transparent;border-radius:var(--dsc-radius);
	background:linear-gradient(var(--dsc-bg),var(--dsc-bg)) padding-box,
		linear-gradient(90deg,#4285f4,#ea4335,#fbbc05,#34a853,#4285f4) border-box;
	background-size:auto,300% 100%;background-position:0 0,0 0;
	animation:dsc-slide 8s linear infinite}
@keyframes dsc-slide{to{background-position:0 0,300% 0}}
/* The Google News mark carries its own colours, so it needs a light plate even
   in dark mode — Google's brand colours on a dark card go muddy. */
.dsc-gnews__icon{width:42px;height:42px;border-radius:11px;background:#fff;box-shadow:inset 0 0 0 1px var(--dsc-line);display:grid;place-items:center;flex:none}
.dsc-gnews__icon svg{width:26px;height:26px}
.dsc-gnews__kicker{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dsc-ink-3);font-weight:700}
.dsc-gnews__txt{font-weight:800}
.dsc-gnews__arrow{margin-left:auto;font-size:1.3rem;color:var(--dsc-ink-2)}

.dsc-toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,14px);z-index:90;max-width:min(92vw,420px);padding:11px 16px;border-radius:12px;background:var(--dsc-ink);color:var(--dsc-bg);font-size:.9rem;font-weight:600;box-shadow:var(--dsc-shadow);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.dsc-toast[data-open]{opacity:1;transform:translate(-50%,0)}

/* discovery feed — shown once, at the end of the article. Deliberately small:
   it is a suggestion, not a takeover. */
.dsc-feedpanel{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin-inline:auto;max-height:56vh;z-index:70;background:var(--dsc-bg);border:1px solid var(--dsc-line);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -6px 28px rgba(8,12,20,.18);transform:translateY(102%);transition:transform .28s cubic-bezier(.2,.8,.25,1);overflow-y:auto;overscroll-behavior:contain;padding:0 14px 18px}
/* Cards inside the sheet are a browse list, not the article feed — two per row
   at most, headline-first, so the sheet stays short. */
.dsc-feedpanel .dsc-grid{grid-template-columns:1fr 1fr;gap:12px}
.dsc-feedpanel .dsc-card{gap:7px}
.dsc-feedpanel .dsc-card__media{aspect-ratio:16/9}
.dsc-feedpanel .dsc-card__title{font-size:.92rem;line-height:1.28;-webkit-line-clamp:3}
.dsc-feedpanel .dsc-card__meta{font-size:.78rem}
.dsc-feedpanel .dsc-card--hero{grid-column:auto;flex-direction:column}
.dsc-feedpanel[data-open]{transform:none}
.dsc-feedpanel__grip{width:36px;height:4px;border-radius:2px;background:var(--dsc-line);margin:9px auto 2px}
.dsc-feedpanel__head{display:flex;align-items:center;gap:8px;position:sticky;top:0;background:var(--dsc-bg);padding:6px 0 10px;z-index:1}
.dsc-feedpanel__head h2{margin:0;font-size:1rem}
.dsc-feedpanel__close{margin-left:auto}
/* On a mouse screen it sits in the corner instead of spanning the viewport. */
@media (min-width:900px){
	.dsc-feedpanel{left:auto;right:20px;bottom:20px;margin-inline:0;width:380px;max-height:64vh;border:1px solid var(--dsc-line);border-radius:16px;transform:translateY(calc(100% + 24px))}
	.dsc-feedpanel .dsc-grid{grid-template-columns:1fr}
	.dsc-feedpanel .dsc-card{flex-direction:row;align-items:flex-start;gap:10px}
	.dsc-feedpanel .dsc-card__media{flex:0 0 108px}
	.dsc-feedpanel .dsc-card>div{flex:1;min-width:0}
	.dsc-feedpanel__grip{display:none}
}

/* infinite feed helpers */
.dsc-sentinel{height:1px}
.dsc-loading{display:flex;justify-content:center;padding:26px 0}
.dsc-spinner{width:26px;height:26px;border:3px solid var(--dsc-line);border-top-color:var(--dsc-accent);border-radius:50%;animation:dsc-spin .7s linear infinite}
@keyframes dsc-spin{to{transform:rotate(360deg)}}
.dsc-nextup{display:flex;align-items:center;gap:10px;margin:34px 0 4px;color:var(--dsc-ink-3);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.dsc-nextup::before,.dsc-nextup::after{content:"";height:1px;background:var(--dsc-line);flex:1}
.dsc-loadmore{display:block;margin:26px auto;background:var(--dsc-ink);color:var(--dsc-bg);border:0;border-radius:999px;padding:13px 30px;font-weight:800;cursor:pointer}

/* ==========================================================================
   6. Comments
   ========================================================================== */
.dsc-comments{margin:34px 0 0}
.dsc-comments__title{font-size:1.25rem;margin:0 0 14px}
.dsc-clist{list-style:none;margin:0;padding:0}
.dsc-clist ol{list-style:none;margin:0;padding-left:34px}
.dsc-comment{padding:14px 0;border-bottom:1px solid var(--dsc-line)}
.dsc-comment__head{display:flex;align-items:center;gap:10px}
.dsc-comment__avatar img{border-radius:50%}
.dsc-comment__author{font-weight:700;font-size:.95rem}
.dsc-comment__badge{font-size:.68rem;font-weight:800;background:#d8f3dc;color:#14532d;border-radius:999px;padding:3px 9px;text-transform:none}
.dsc-comment__date{font-size:.78rem;color:var(--dsc-ink-3)}
.dsc-comment__text{margin:8px 0 8px;font-size:.98rem;color:var(--dsc-ink)}
.dsc-comment__actions{display:flex;align-items:center;gap:8px;font-size:.85rem}
.dsc-vote{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;min-width:52px;border:1px solid var(--dsc-line);background:var(--dsc-bg);border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--dsc-ink-2);font-size:.82rem;font-weight:700}
.dsc-vote:hover{border-color:var(--dsc-ink-3)}
.dsc-vote[aria-pressed=true]{border-color:var(--dsc-accent);color:var(--dsc-accent)}
.dsc-vote svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9}
.dsc-comment__reply{margin-left:auto;font-weight:700;text-decoration:none;color:var(--dsc-ink)}
.dsc-comments .comment-respond{margin-top:18px}
.dsc-comments label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px}
.dsc-comments input[type=text],.dsc-comments input[type=email],.dsc-comments input[type=url],.dsc-comments textarea{
	width:100%;border:1px solid var(--dsc-line);border-radius:var(--dsc-radius-sm);padding:11px 13px;font:inherit;background:var(--dsc-bg);color:var(--dsc-ink);margin-bottom:12px}
.dsc-comments textarea{border-radius:22px;padding:14px 18px}
.dsc-comments .submit{background:var(--dsc-ink);color:var(--dsc-bg);border:0;border-radius:999px;padding:12px 26px;font-weight:800;cursor:pointer}

/* ==========================================================================
   7. Beeps (short news cards)
   ========================================================================== */
.dsc-beep{border:1px solid var(--dsc-line);border-radius:var(--dsc-radius);overflow:hidden;background:var(--dsc-bg);display:flex;flex-direction:column}
.dsc-beep__media{display:block;aspect-ratio:16/9;background:var(--dsc-bg-3)}
.dsc-beep__media img{width:100%;height:100%;object-fit:cover}
.dsc-beep__body{padding:13px;display:flex;flex-direction:column;gap:7px;flex:1}
.dsc-beep__title{font-size:1rem;font-weight:800;margin:0;line-height:1.26;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dsc-beep__txt{font-size:.9rem;color:var(--dsc-ink-2);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dsc-beep__more{margin-top:auto;font-size:.85rem;font-weight:700;text-decoration:none}

/* ==========================================================================
   7b. Media summary (YouTube-style) + ad slots
   ========================================================================== */
.dsc-msum{border:1px solid var(--dsc-line);border-radius:var(--dsc-radius);background:var(--dsc-bg-2);margin:0 0 20px;overflow:hidden}
.dsc-msum__btn{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;padding:12px 14px;cursor:pointer;text-align:start;font-size:.94rem}
.dsc-msum__spark{color:#7b5cff;display:inline-flex;flex:none}
.dsc-msum__peek{flex:1;min-width:0;color:var(--dsc-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsc-msum__cta{font-weight:700;flex:none}
.dsc-msum__btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.dsc-msum__btn[aria-expanded=true] svg{transform:rotate(180deg)}
.dsc-msum__btn[aria-expanded=true] .dsc-msum__peek{display:none}
.dsc-msum__body{padding:0 14px 14px}
.dsc-msum__body p{margin:0 0 8px;font-size:.95rem}
.dsc-msum__note{font-size:.76rem;color:var(--dsc-ink-3)}

.dsc-ad{display:block;margin:26px 0;text-align:center;overflow:hidden}
.dsc-ad__label{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dsc-ink-3);margin-bottom:6px}
.dsc-ad iframe,.dsc-ad img{max-width:100%}
.dsc-grid>.dsc-ad{grid-column:1/-1}

/* ==========================================================================
   8. Footer / misc
   ========================================================================== */
.dsc-btn{border:0;border-radius:999px;padding:11px 20px;font-weight:700;cursor:pointer;background:var(--dsc-accent);color:var(--dsc-accent-ink)}
.dsc-btn--ghost{background:var(--dsc-bg-2);color:var(--dsc-ink)}

/* The tall bottom padding exists to clear the sticky share bar. Pages without
   one (the homepage, archives) get the normal spacing. */
.dsc-footer{border-top:1px solid var(--dsc-line);margin-top:44px;padding:28px 0 calc(34px + env(safe-area-inset-bottom));background:var(--dsc-bg-2);color:var(--dsc-ink-2);font-size:.9rem}
body:has([data-dsc-stickybar]) .dsc-footer{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.dsc-footer__social{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.dsc-footer__social a{display:grid;place-items:center;width:52px;height:40px;border:1.5px solid var(--dsc-line);border-radius:10px;background:var(--dsc-bg)}
.dsc-footer__social svg{width:22px;height:22px}
.dsc-footer nav ul{list-style:none;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:0;margin:0 0 14px}
.dsc-footer a{color:var(--dsc-ink-2)}
.dsc-footer__copy{text-align:center;font-size:.82rem;color:var(--dsc-ink-3)}
@media (min-width:900px){.dsc-footer,body:has([data-dsc-stickybar]) .dsc-footer{padding-bottom:34px}}

/* The row is the <nav> itself (custom markup) or the .nav-links wrapper that
   core's the_posts_pagination adds — never the links themselves, which are
   inline chips. */
.dsc-pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:30px 0}
.dsc-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.dsc-pagination .page-numbers{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--dsc-line);border-radius:10px;text-decoration:none;color:var(--dsc-ink)}
.dsc-pagination .screen-reader-text{display:none}
.dsc-pagination--pages{justify-content:flex-start;gap:6px;margin:18px 0}
.dsc-pagination--pages .page-numbers-label{align-self:center;font-weight:700;color:var(--dsc-ink-3)}
.dsc-pagination .current{background:var(--dsc-ink);color:var(--dsc-bg);border-color:var(--dsc-ink)}

.dsc-empty{text-align:center;padding:50px 0}
.dsc-breadcrumbs{font-size:.8rem;color:var(--dsc-ink-3);margin:12px 0}
.dsc-breadcrumbs a{color:var(--dsc-ink-3);text-decoration:none}
.dsc-breadcrumbs a:hover{color:var(--dsc-accent)}

/* WP core classes */
.alignwide{max-width:min(100%,980px);margin-inline:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.alignleft{float:left;margin:.3em 1.2em .8em 0}
.alignright{float:right;margin:.3em 0 .8em 1.2em}
.aligncenter{margin-inline:auto}
.wp-caption-text,.wp-element-caption{font-size:.79rem;color:var(--dsc-ink-3)}
.sticky .dsc-card__title::before{content:"★ ";color:var(--dsc-accent)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gallery-item img{border-radius:var(--dsc-radius-sm)}