/*
 * Desktop-only changes (laptops and larger, >= 1026px).
 *
 * HARD RULE: nothing in this file may ever affect phones or tablets.
 *   1. It is enqueued with media="(min-width: 1026px)" (inc/template-functions.php),
 *      so the browser does not apply it below that width.
 *   2. Every rule is ALSO inside @media (min-width: 1026px) — a second, independent
 *      guard. Keep it that way: no rule outside the query.
 *   3. 1026 rather than 1025 because responsive.css still applies the tablet layout
 *      at exactly 1025px.
 *
 * Loaded after tokens.css. Where a legacy rule (add.css) uses !important, the
 * matching rule here has to as well; those spots are commented.
 */

@media (min-width: 1026px) {

	/* ------------------------------------------------------------------
	 * 1. Red top bar: a little shorter, everything on one vertical centre.
	 *
	 * Bar was 34px. Now 30px = 3px padding + a 24px row. The row's centre is
	 * the one line the tagline, the date and the social icons are all aligned to.
	 *
	 * The tagline is capital letters, which sit in the upper part of a line box
	 * (the font reserves a lot of room below the baseline for Telugu glyphs), so
	 * simply centring its box leaves the capitals ~2px too high. The offsets
	 * below put the capitals' visual middle on the row centre.
	 * ------------------------------------------------------------------ */
	body .site-header.layout--default .top-header .row {
		height: 24px;
		min-height: 24px;
		align-items: center !important; /* add.css sets it !important */
	}

	body .site-header.layout--default .top-header .top-header-tagline {
		position: relative;
		top: 2px;
	}

	body .site-header.layout--default .top-header .top-date-time .date {
		position: relative;
		top: 1px; /* puts its baseline on the same line as the tagline's */
	}

	body .site-header.layout--default .top-header .social-icons-wrap .social-icon {
		width: 24px;
		height: 24px;
		min-height: 24px;
		padding: 0;
		justify-content: center;
	}

	/* ------------------------------------------------------------------
	 * 2. Hamburger menu button removed on desktop. (Its panel only held
	 *    Disclaimer / Contact Us / Privacy Policy, which the live site already
	 *    shows in its footer.)
	 * ------------------------------------------------------------------ */
	body .site-header .sidebar-toggle-wrap {
		display: none;
	}

	/* The search button is now the last item: put its icon (not its invisible
	   44px touch area) on the same right edge as the content below. */
	body .site-header .search-wrap {
		padding-right: 0;
		margin-right: -9px;
	}

	/* ------------------------------------------------------------------
	 * 3. Same gap above and below the headline strip: 6px each (was 12px each).
	 *    Above: the strip used to touch the white header bar (0px); the header
	 *    block also ends with a transparent 1px, so 5px here = 6px visible.
	 *    Below: the hero section's top margin (12px in tokens.css) is halved.
	 * ------------------------------------------------------------------ */
	body .after-header {
		padding-top: 5px;
	}

	body #main-banner-section {
		margin-top: 6px;
	}

	/* ------------------------------------------------------------------
	 * 5. Headline strip: small red "Headlines" tag (top-left corner) and small
	 *    red pause/play button (top-right corner). Each is exactly 30% of the
	 *    strip's height, and both sit OVER the scrolling track (the headlines
	 *    slide behind them). Markup comes from
	 *    mu-plugins/header-headline-strip.php, hidden inline and revealed here.
	 * ------------------------------------------------------------------ */
	body .dn-headline-strip {
		position: relative;
	}

	body .dn-headline-strip .dn-headline-label {
		display: flex !important; /* beats the inline display:none */
		align-items: center;
		justify-content: center;
		gap: 7px;
		position: absolute;
		z-index: 3;
		top: 0;
		left: 0;
		height: 30%;
		padding: 0 14px; /* equal left/right so icon + word are centred horizontally */
		color: #fff;
		background: linear-gradient(90deg, #d90000 0%, #ff0000 100%);
		border-bottom-right-radius: 6px;
		box-shadow: 0 2px 10px -2px rgba(255, 0, 0, 0.5); /* soft red glow */
	}

	body .dn-headline-strip .dn-headline-label__icon {
		height: 60%;
		width: auto;
		aspect-ratio: 1;
		flex: 0 0 auto;
	}

	body .dn-headline-strip .dn-headline-label__text {
		font-size: 17px;
		font-weight: 700;
		line-height: 1;
		white-space: nowrap;
		/* The font reserves extra room below the baseline (for Telugu glyphs), so
		   a plain-centred "Headlines" sits ~3px high. Moved down by 2px, which
		   (measured) puts the middle of the lowercase letters 0.5px under the
		   centre line and the capitals 0.5px over it: centred to the eye, since
		   most of this word is lowercase. */
		position: relative;
		top: 2px;
	}

	body .dn-headline-strip .dn-headline-controls {
		display: block !important; /* beats the inline display:none */
		position: absolute;
		z-index: 3;
		top: 0;
		right: 0;
		height: 30%;
		aspect-ratio: 1;
	}

	body .dn-headline-strip .dn-headline-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 0;
		border: 0;
		border-bottom-left-radius: 6px;
		background: linear-gradient(90deg, #ff0000 0%, #d90000 100%);
		color: #fff;
		cursor: pointer;
		box-shadow: 0 2px 10px -2px rgba(255, 0, 0, 0.5);
		transition: background-color .15s ease;
	}

	body .dn-headline-strip .dn-headline-toggle:hover {
		background: #b30000;
	}

	body .dn-headline-strip .dn-headline-toggle:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -4px;
	}

	body .dn-headline-strip .dn-headline-toggle svg {
		width: 58%;
		height: 58%;
	}

	/* One icon at a time: pause bars while scrolling, play triangle while paused. */
	body .dn-headline-strip .dn-headline-toggle__play {
		display: none;
	}

	body .dn-headline-strip.is-paused .dn-headline-toggle__pause {
		display: none;
	}

	body .dn-headline-strip.is-paused .dn-headline-toggle__play {
		display: block;
		margin-left: 1px; /* optically centres the triangle */
	}

	/* Paused by the button: stays paused even after the mouse leaves
	   (the existing hover-pause would otherwise resume it). */
	body .dn-headline-strip.is-paused .dn-headline-strip__track {
		animation-play-state: paused;
	}

	/* ------------------------------------------------------------------
	 * 6. Headline strip made 15% bigger overall (was 86px tall, now ~99px).
	 *    Every dimension below is the old value x 1.15, so the strip keeps its
	 *    proportions: item 300 -> 345px wide, thumbnail 84x60 -> 97x69,
	 *    headline 14 -> 16px, padding 12/18 -> 14/21. The corner tag and button
	 *    are a % of the strip's height, so they grow with it; the tag's text is
	 *    scaled to match (15 -> 17px, above).
	 * ------------------------------------------------------------------ */
	body .dn-headline-item {
		flex: 0 0 345px;
		gap: 14px;
		padding: 14px 21px;
	}

	body .dn-headline-thumb {
		flex: 0 0 97px;
		width: 97px;
		height: 69px;
		border-radius: 7px;
	}

	body .dn-headline-title {
		font-size: 16px;
	}

	/* ------------------------------------------------------------------
	 * 7. Hero section ("Latest News" column, big slider, right column) 8% bigger.
	 *    Heights: 360 -> ~389px. The three columns already fill the full content
	 *    width (they share 1317px at 1440), so widths cannot grow without
	 *    squeezing a neighbour; the columns keep their proportions and the
	 *    extra size goes into height and type.
	 *    Left column: heading block + 2 stacked cards + 12px gap must total the
	 *    same height as the slider; the slider height is matched to it (see
	 *    the verification numbers in the commit message / notes).
	 *    Type is the old size x 1.08 (most sizes come from theme variables, so the
	 *    multiplier is applied to the same variable expression).
	 * ------------------------------------------------------------------ */
	body .banner-layout--five .main-banner-wrap article .post-thumb {
		height: 389px;
	}

	body .banner-layout--five .main-banner-grid-posts article .post-thumb {
		height: 168px;
	}

	body .banner-layout--five h2.section-title {
		font-size: calc(var(--block-title-size) * 0.8 * 1.08);
	}

	body .banner-layout--five .main-banner-grid-posts article .post-element .post-title {
		font-size: calc(var(--post-title-size) * 0.83 * 1.08);
	}

	body .banner-layout--five .main-banner-grid-posts article .post-element .post-excerpt {
		font-size: calc(0.85rem * 1.08);
	}

	body .main-banner-wrap .post-element .post-title {
		font-size: calc(var(--post-title-size) * 1.53 * 2 * 1.08);
		/* The theme boxes the title to 90% of the text area, which can push a
		   mid-length headline onto a second line at a bigger size; the full width
		   keeps it on one. Still clamped to 2 lines. */
		width: 100%;
	}

	body .main-banner-wrap .post-element .post-excerpt {
		font-size: calc(var(--content-size) * 1.08);
	}

	/* ------------------------------------------------------------------
	 * 8. Space between the hero section and the post list / sidebar below it:
	 *    34px -> 17px (half). It was the hero's 10px bottom padding plus the
	 *    post area's 24px top padding. Home page only.
	 * ------------------------------------------------------------------ */
	body.home #main-banner-section {
		padding-bottom: 5px;
	}

	body.home.dn-feed.dn-cards #theme-content { /* needs the extra classes to outrank tokens.css .dn-feed.dn-cards #theme-content */
		padding-top: 12px;
	}

	/* ------------------------------------------------------------------
	 * 9. Hero slider controls (big middle card)
	 *    a) Previous / next buttons: plain gray round buttons, black chevrons.
	 *    b) The row of dots is removed; a "n / total" counter sits in the
	 *       top-LEFT corner instead (created by mu-plugins/desktop-hero-controls.php,
	 *       hidden inline and revealed here). The category / time label stays
	 *       in the top-right corner.
	 *    c) Description: no longer 3 lines; the script cuts it to ~1.5 lines + "...".
	 *       Without JS it falls back to a 2-line clamp.
	 * ------------------------------------------------------------------ */
	body .main-banner-wrap {
		position: relative;
	}

	body .main-banner-wrap .slick-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #d4d4d8;
		color: #000;
		line-height: 1;
		cursor: pointer;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
		transition: background-color .15s ease, box-shadow .15s ease;
	}

	body .main-banner-wrap .slick-prev {
		left: 14px;
	}

	body .main-banner-wrap .slick-next {
		right: 14px;
	}

	body .main-banner-wrap .slick-arrow:hover,
	body .main-banner-wrap .slick-arrow:focus-visible {
		background: #e5e7eb;
		color: #000;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	}

	body .main-banner-wrap .slick-arrow:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 2px;
	}

	/* The icon wrapper and the chevron: black, centred, no leftover decoration. */
	body .main-banner-wrap .slick-arrow i,
	body .main-banner-wrap .slick-arrow:hover i {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		/* main.css gives this wrapper a green square: 1px green border, 2px radius,
		   green background (darker green on hover). That square was showing around
		   the round button - removed. */
		border: 0;
		border-radius: 0;
		background: none;
		color: #000;
		line-height: 1;
		transition: none;
	}

	body .main-banner-wrap .slick-arrow svg {
		width: 22px;
		height: 22px;
		stroke: #000;
		fill: none;
	}

	body .main-banner-wrap .slick-arrow::before,
	body .main-banner-wrap .slick-arrow::after {
		content: none;
	}

	/* Dots off. */
	body .main-banner-wrap .slick-dots {
		display: none !important;
	}

	/* Counter. */
	body .main-banner-wrap .dn-hero-counter {
		display: flex !important; /* beats the inline display:none */
		align-items: center;
		justify-content: center;
		gap: 5px;
		position: absolute;
		z-index: 6;
		top: auto;
		left: auto;
		bottom: 15px;
		right: 23px; /* bottom right corner of the card */
		min-width: 62px;
		height: 29px;
		padding: 0 12px;
		border-radius: 4px;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	/* Description: no 3-line block any more. */
	body .main-banner-wrap .post-element .post-excerpt p {
		-webkit-line-clamp: 2;
	}

	/* ------------------------------------------------------------------
	 * 10. "You May Have Missed" carousel (bottom of the home page)
	 *     Was: four wide white tiles each holding an 84x64 thumbnail and a 14px
	 *     two-line headline, so most of every tile was empty. Now: four picture
	 *     cards - a large image on top, a 18px bold headline under it - with
	 *     round gray arrows like the hero. Dots stay off (tokens.css already
	 *     hides them). tokens.css makes the tile layout with !important at
	 *     >= 769px, so the overrides below are !important too, and use the
	 *     section id so they outrank it.
	 * ------------------------------------------------------------------ */
	body #bottom-full-width-section h2.digital-newspaper-block-title {
		font-size: 24px;
		line-height: 1.3;
	}

	body #bottom-full-width-section h2.digital-newspaper-block-title span {
		font-size: inherit;
	}

	/* The white panel behind the whole carousel is dropped, so the picture cards
	   sit directly on the page background. */
	body #bottom-full-width-section .news-carousel .news-carousel-post-wrap {
		background: transparent;
	}

	body #bottom-full-width-section .news-carousel .carousel-item {
		background: transparent !important;
		height: auto;
		padding: 6px 10px 14px;
	}

	body #bottom-full-width-section .news-carousel .carousel-item .blaze_box_wrap {
		display: block;
		height: auto;
		padding: 0 !important;
		overflow: hidden;
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
		transition: box-shadow .2s ease, transform .2s ease;
	}

	body #bottom-full-width-section .news-carousel .carousel-item:hover .blaze_box_wrap {
		box-shadow: 0 8px 20px rgba(16, 24, 40, 0.16);
		transform: translateY(-3px);
	}

	body #bottom-full-width-section .news-carousel .carousel-item .post-thumb-wrap {
		/* Note: in this theme the headline block (.post-element) sits INSIDE this
		   <figure>, beside/below the picture link, so the figure must be as tall as
		   both; only the picture link below has the fixed 190px height. */
		display: block !important;
		position: relative !important;
		width: 100%;
		height: auto;
		min-height: 0;
		margin: 0 !important;
		overflow: visible;
		background: transparent !important;
	}

	body #bottom-full-width-section .news-carousel .carousel-item .post-thumb-wrap > a {
		display: block;
		width: 100%;
		height: 190px;
		overflow: hidden;
		background: #e4e4e7;
	}

	body #bottom-full-width-section .news-carousel .carousel-item .post-thumb-wrap > a img {
		display: block;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		border-radius: 0 !important;
		transition: transform .35s ease;
	}

	body #bottom-full-width-section .news-carousel .carousel-item:hover .post-thumb-wrap > a img {
		transform: scale(1.05);
	}

	body #bottom-full-width-section .news-carousel .carousel-item .post-element {
		display: block;
		flex: 1 1 auto;
		padding: 14px 16px 16px !important;
	}

	body #bottom-full-width-section .news-carousel .carousel-item .post-title {
		margin: 0 !important;
		font-size: 18px !important;
		font-weight: 700 !important;
		line-height: 1.5 !important;
		height: 3em;             /* exactly two lines; anything past it - such as the tall top of a third line - is cut off */
		overflow: hidden;
	}

	body #bottom-full-width-section .news-carousel .carousel-item .post-title a {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;        /* clips everything after line 2, so no piece of line 3 shows */
		min-height: 3em;         /* two lines, so every card is the same height */
		max-height: 3em;
		color: #1f1f24 !important;
	}

	body #bottom-full-width-section .news-carousel .carousel-item:hover .post-title a {
		color: #c8102e !important;
	}

	/* Arrows: same round gray / black look as the hero, centred on the pictures. */
	body #bottom-full-width-section .news-carousel .slick-arrow {
		visibility: visible; /* the theme only shows them while the mouse is over the carousel */
		top: 101px; /* middle of the 6px padding + 190px picture */
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #d4d4d8;
		color: #000;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
		cursor: pointer;
		transition: background-color .15s ease;
	}

	body #bottom-full-width-section .news-carousel .slick-prev.slick-arrow {
		left: 14px;
	}

	body #bottom-full-width-section .news-carousel .slick-next.slick-arrow {
		right: 14px;
	}

	body #bottom-full-width-section .news-carousel .slick-arrow:hover,
	body #bottom-full-width-section .news-carousel .slick-arrow:focus-visible {
		background: #e5e7eb;
	}

	body #bottom-full-width-section .news-carousel .slick-arrow:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 2px;
	}

	body #bottom-full-width-section .news-carousel .slick-arrow i,
	body #bottom-full-width-section .news-carousel .slick-arrow:hover i {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: #000;
		transition: none;
	}

	body #bottom-full-width-section .news-carousel .slick-arrow svg {
		width: 22px;
		height: 22px;
		stroke: #000;
		fill: none;
	}

	body #bottom-full-width-section .news-carousel .slick-arrow::before,
	body #bottom-full-width-section .news-carousel .slick-arrow::after {
		content: none;
	}

	/* ------------------------------------------------------------------
	 * 12. Hero headlines at real length. The big 82px type was sized for 1-2 word
	 *     test titles; real headlines are 20-150 characters. The template adds a
	 *     length class (dn-len-s <=18 chars, -m <=45, -l <=80, -xl longer), and the
	 *     size steps down with it. Up to 3 lines instead of 2.
	 * ------------------------------------------------------------------ */
	/* The size is set on the heading AND on its link: the link gets its own size from the theme, so
	   sizing only the heading would not change the visible text. */
	body .main-banner-wrap .post-element .post-title.dn-len-s,
	body .main-banner-wrap .post-element .post-title.dn-len-s a   { font-size: 34px; }
	body .main-banner-wrap .post-element .post-title.dn-len-m,
	body .main-banner-wrap .post-element .post-title.dn-len-m a   { font-size: 34px; }
	body .main-banner-wrap .post-element .post-title.dn-len-l,
	body .main-banner-wrap .post-element .post-title.dn-len-l a   { font-size: 34px; }
	body .main-banner-wrap .post-element .post-title.dn-len-xl,
	body .main-banner-wrap .post-element .post-title.dn-len-xl a  { font-size: 34px; }

	body .main-banner-wrap .post-element .post-title[class*="dn-len-"] {
		-webkit-line-clamp: 3;
		line-height: 1.25;
		margin-bottom: 12px;
	}

	body .main-banner-wrap .post-element .post-title[class*="dn-len-"] a {
		line-height: 1.25;
	}

	/* "Top Picks" badge, top left of picked slides: a gold star block and a red text block in one badge,
	   joined by a slanted edge, with a slow shine. Smaller and finer than the first version (34px tall,
	   was 42px), with a thin light edge and a soft shadow. */
	body .main-banner-wrap .slide-item .dn-pick-tag {
		display: flex !important; /* beats the inline display:none */
		align-items: stretch;
		position: absolute;
		z-index: 6;
		top: 15px;
		left: 15px;
		height: 34px;
		border-radius: 7px;
		overflow: hidden;
		font-size: 16px;
		font-weight: 800;
		line-height: 1;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22);
	}

	body .main-banner-wrap .slide-item .dn-pick-ico {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		position: relative;
		z-index: 1;
		background: linear-gradient(135deg, #ffe066 0%, #ffb300 55%, #ff8a00 100%);
		color: #7a2200;
	}

	body .main-banner-wrap .slide-item .dn-pick-ico svg {
		width: 17px;
		height: 17px;
	}

	body .main-banner-wrap .slide-item .dn-pick-txt {
		display: flex;
		align-items: center;
		margin-left: -10px;
		padding: 2px 15px 1px 19px; /* a little room for Telugu's tall marks */
		background: linear-gradient(135deg, #ff3b30 0%, #d3101e 55%, #9f0010 100%);
		color: #fff;
		letter-spacing: 0.01em;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
		clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
		font-weight: 800;
	}

	body .main-banner-wrap .slide-item .dn-pick-tag::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: -60%;
		width: 36%;
		background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
		transform: skewX(-20deg);
		animation: dn-pick-shine 5s ease-in-out infinite;
		pointer-events: none;
		z-index: 2;
	}

	@keyframes dn-pick-shine {
		0%, 70% { left: -60%; }
		100% { left: 130%; }
	}

	@media (prefers-reduced-motion: reduce) {
		body .main-banner-wrap .slide-item .dn-pick-tag::after { animation: none; display: none; }
	}

	/* If the slider script fails, show the first slide instead of a stack of all of them. */
	body .main-banner-slider:not(.slick-initialized) .slide-item:not(:first-child) {
		display: none;
	}

	/* ------------------------------------------------------------------
	 * 13. Headline strip: Breaking marker, constant speed, reduced motion.
	 *     - Breaking items (mu-plugins/header-headline-strip.php) carry a red chip on
	 *       the corner of their picture; the chip is output hidden and revealed here.
	 *     - Speed: one item takes the same time to pass whether the strip holds 3
	 *       items or 12 (8.6 s per 345px item = 40px/s). The item count per half comes
	 *       from the --dn-strip-n variable set on the strip.
	 *     - Reduced motion: the row would otherwise freeze on its first 4 items. It
	 *       becomes a plain horizontally scrollable row instead (inert copies hidden,
	 *       left padding so the first item clears the "Headlines" tag).
	 * ------------------------------------------------------------------ */
	body .dn-headline-strip .dn-headline-item {
		position: relative;
	}

	body .dn-headline-strip .dn-headline-flag {
		display: flex !important; /* beats the inline display:none */
		align-items: center;
		position: absolute;
		top: 14px;
		left: 21px;
		z-index: 2;
		height: 22px;
		padding: 0 8px;
		border-radius: 7px 0 7px 0;
		background: #ff0000;
		color: #fff;
		font-size: 13px;
		font-weight: 700;
		line-height: 1;
	}

	body .dn-headline-strip .dn-headline-strip__track {
		animation-duration: calc(var(--dn-strip-n, 10) * 8.6s);
	}

	/* When the script drives the ticker (it moves a short track and recycles headlines) the CSS animation is off. */
	body .dn-headline-strip.dn-js .dn-headline-strip__track {
		animation: none !important;
		will-change: transform;
	}

	/* By hand: sideways swipes / drags move the ticker; vertical page scrolling still works on a touch screen. */
	body .dn-headline-strip.dn-js {
		touch-action: pan-y;
	}

	body .dn-headline-strip.dn-js.is-dragging,
	body .dn-headline-strip.dn-js.is-dragging * {
		cursor: grabbing !important;
		user-select: none;
	}

	@media (prefers-reduced-motion: reduce) {
		body .dn-headline-strip {
			overflow-x: auto;
		}

		body .dn-headline-strip .dn-headline-strip__track {
			padding-left: 150px;
			padding-right: 40px;
		}

		body .dn-headline-strip .dn-headline-item[aria-hidden="true"] {
			display: none;
		}
	}

	/* ------------------------------------------------------------------
	 * 14. "Latest News" column: time-ago chip on each card's picture (top-left).
	 *     Output hidden by an inline style (so tablets are unchanged); revealed here.
	 * ------------------------------------------------------------------ */
	body .main-banner-grid-posts article .post-thumb {
		position: relative;
	}

	body .main-banner-grid-posts article .dn-ago {
		display: inline-flex !important; /* beats the inline display:none */
		align-items: center;
		position: absolute;
		top: 8px;
		left: 8px;
		z-index: 3;
		height: 22px;
		padding: 0 8px;
		border-radius: 4px;
		background: rgba(0, 0, 0, 0.65);
		color: #fff;
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		pointer-events: none;
	}

	/* ------------------------------------------------------------------
	 * 15. Cards are never blank boxes.
	 *     A post with no featured image (old posts, imports, a deleted file) gets the
	 *     site logo on a soft background wherever a picture would be: hero, Latest News
	 *     column, post list and "You May Have Missed". (The logo URL comes from the
	 *     --dn-placeholder-logo variable printed in <head> by mu-plugins/home-feed-logic.php.)
	 *     Also: "You May Have Missed" is hidden when it would have fewer than 4 cards
	 *     (the script adds .dn-few), because a half-empty row looks broken.
	 * ------------------------------------------------------------------ */
	body .news-list-wrap .post-thumb-wrap.no-feat-img,
	body #bottom-full-width-section .carousel-item.no-feat-img .post-thumb-wrap > a {
		background: #eceef1 var(--dn-placeholder-logo, none) center / 62% auto no-repeat !important;
	}

	body .main-banner-grid-posts .post-item.no-feat-img .post-thumb {
		background: var(--dn-placeholder-logo, none) 82% 24% / 38% auto no-repeat,
		            linear-gradient(135deg, #25262c 0%, #3d3f48 100%);
	}

	body .main-banner-slider .slide-item.no-feat-img .post-thumb {
		min-height: 389px;
		background: var(--dn-placeholder-logo, none) 90% 22% / 22% auto no-repeat,
		            linear-gradient(135deg, #25262c 0%, #3d3f48 100%);
	}

	/* The theme reserves a 62.5% tall empty box for a missing picture; the card already has its own 190px picture area. */
	body #bottom-full-width-section .news-carousel .carousel-item.no-feat-img .post-thumb-wrap {
		padding-bottom: 0 !important;
	}

	body #bottom-full-width-section.dn-few {
		display: none;
	}

	/* ------------------------------------------------------------------
	 * 16. Headings only (requested): no description in the hero or the Latest News
	 *     column; headings stop at 2 lines with "...". The post list's headings get a
	 *     bit bigger, and the sidebar "Latest Posts" titles stop at 2 lines with "...".
	 * ------------------------------------------------------------------ */
	/* a) Hero: heading only, 2 lines. */
	body .main-banner-wrap .post-element .post-excerpt,
	/* b) Latest News column: heading only. */
	body .main-banner-grid-posts .post-element .post-excerpt {
		display: none !important;
	}

	body .main-banner-wrap .post-element .post-title[class*="dn-len-"] {
		-webkit-line-clamp: 2;
		margin-bottom: 0;
	}

	body .main-banner-wrap .post-element .post-title[class*="dn-len-"] a {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	body .main-banner-grid-posts .post-element .post-title a {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* c) Post list: bigger headings (18px -> 21px), still 2 lines then "...". */
	/* (the long selector is needed to outrank tokens.css, which sets this size through #theme-content) */
	body.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-title {
		font-size: 21px;
		line-height: 1.4;
	}

	body.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-title a {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* d) Sidebar "Latest Posts": titles stop at 2 lines with "...". */
	body #secondary .wp-block-latest-posts__post-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* ------------------------------------------------------------------
	 * 17. Hero heading sits at 71% of the card (it was glued to the bottom edge, then 60%, which was too high).
	 *     The text block now fills the whole slide, with its content centred in the lower
	 *     part: the top padding is tuned (by measurement) so the heading's centre lands on 71% of the
	 *     389px card (276px). The dark fade that sat behind the old bottom strip is
	 *     now a taller fade over the whole slide so the heading is still easy to read.
	 *     The block ignores the mouse (the picture stays clickable); only the heading link
	 *     is clickable.
	 * ------------------------------------------------------------------ */
	body .main-banner-wrap .post-element {
		top: 0;
		bottom: 0;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 180px;  /* measured: puts the heading centre at 71% of the card (63px gave 60%) */
		padding-bottom: 0;
		background-image: linear-gradient(to top,
			rgba(0, 0, 0, 0.88) 0%,
			rgba(0, 0, 0, 0.78) 30%,
			rgba(0, 0, 0, 0.5) 58%,
			rgba(0, 0, 0, 0) 88%);
		pointer-events: none;
	}

	body .main-banner-wrap .post-element .post-title a {
		pointer-events: auto;
	}

	/* ------------------------------------------------------------------
	 * 18. One consistent hero heading: same size, same weight, always white
	 *     (the theme coloured each heading by its category: orange, green, blue, red).
	 * ------------------------------------------------------------------ */
	body .main-banner-wrap .post-element .post-title,
	body .main-banner-wrap .post-element .post-title a,
	body .main-banner-wrap .post-element .post-title a:hover,
	body .main-banner-wrap .post-element .post-title a:focus {
		color: #fff !important;
		font-weight: 700 !important;
		font-size: 34px !important;
		transition: none !important;
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
		-webkit-text-stroke: 0 !important;   /* no outline around the letters */
		paint-order: normal;
		letter-spacing: 0;
		line-height: 1.42 !important;
	}

	/* ------------------------------------------------------------------
	 * 19. Progressive blur behind the heading (the way phones and streaming apps do it): no box and no
	 *     edges. The lower part of the picture goes gradually out of focus and darker, the blur growing
	 *     smoothly from nothing at about 40% of the card height to strong at the bottom, so the white
	 *     heading reads cleanly while the picture still shows through above it. Two blur layers
	 *     (light, then strong) plus a soft dark fade. The heading sits between 65% and 85%.
	 *     Line-height 1.42 gives Telugu's tall marks room inside their own line, so the clipped third
	 *     line cannot peek out under the second one.
	 * ------------------------------------------------------------------ */
	body .main-banner-wrap .post-element {
		isolation: isolate;
		background-image: linear-gradient(to top,
			rgba(0, 0, 0, 0.62) 0%,
			rgba(0, 0, 0, 0.42) 30%,
			rgba(0, 0, 0, 0.14) 55%,
			rgba(0, 0, 0, 0) 72%);
	}

	body .main-banner-wrap .post-element::before,
	body .main-banner-wrap .post-element::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		pointer-events: none;
	}

	body .main-banner-wrap .post-element::before {
		top: 38%;
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
	}

	body .main-banner-wrap .post-element::after {
		top: 55%;
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 75%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 75%);
	}

	body .main-banner-wrap .post-element .post-title {
		position: relative;
		z-index: 1;
		padding: 0 40px;
	}