/* Typography Match */
	body {
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
		background-color: #ffffff;
		color: #000;
		-webkit-font-smoothing: antialiased;
	}

	/* --- HEADER STYLES --- */
	.cnn-header-wrapper {
		position: sticky;
		top: 0;
		z-index: 50;
		background: white;
	}

	.cnn-header-inner {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 16px;
		height: 54px;
		/* Image height seems compact */
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-link {
		font-size: 14px;
		font-weight: 700;
		color: #000;
		text-decoration: none;
		margin-right: 16px;
	}

	.nav-link:hover {
		color: #555;
	}

	.btn-signin {
		border: 1px solid #ccc;
		border-radius: 4px;
		/* More rectangular in the image */
		padding: 4px 12px;
		font-size: 13px;
		font-weight: 700;
		color: #000;
		background: white;
		white-space: nowrap;
		border-radius: 8px;
	}

	.btn-signin:hover {
		background-color: #f9f9f9;
	}

	.thick-black-line {
		height: 2px;
		background-color: #000;
		width: 100%;
	}

	/* --- TICKER SECTION --- */
	.ticker-container {
		max-width: 1280px;
		margin: 0 auto;
		padding: 24px 16px 0 16px;
		/* Top padding */
	}

	.ticker-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
		padding-bottom: 24px;
		border-bottom: 1px solid #e6e6e6;
		/* The thin grey line */
		position: relative;
	}

	.ticker-item {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		cursor: pointer;
		position: relative;
		padding-bottom: 10px;
		/* Space for the bar */
	}

	.ticker-circle {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
		background-color: #ddd;
	}

	.ticker-meta {
		margin-top: -2px;
	}

	.ticker-label {
		color: #CC0000;
		font-size: 10px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 4px;
		display: block;
	}

	.ticker-headline {
		font-size: 16px;
		line-height: 1.25;
		color: #000;
		font-weight: 400;
	}

	/* The Red Bar under the active item */
	.red-bar {
		position: absolute;
		bottom: -25px;
		/* Pushes it down to align with the container border */
		left: 0;
		width: 100%;
		height: 4px;
		background-color: #CC0000;
		z-index: 10;
	}

	/* --- MAIN LAYOUT --- */
	.content-grid {
		justify-content: center;
		display: flex;
		gap: 40px;
		max-width: 1280px;
		margin: 30px auto;
		padding: 0 16px;
	}

	.sidebar {
		width: 260px;
		flex-shrink: 0;
	}

	.feed-main {
		flex-grow: 1;
	}

	/* Feed Line Styles */
	.feed-timeline {
		border-left: 1px solid #e6e6e6;
		margin-left: 5px;
		padding-left: 25px;
	}

	.post-container {
		position: relative;
		padding-bottom: 40px;
		border-bottom: 1px solid #e6e6e6;
		margin-bottom: 30px;
	}

	.box-container {
		position: relative;
		border: solid 1px #e6e6e6;
		border-top: none;
		border-right: none;
		margin-top: 1em;
		padding-top: 2em;
	}

	.timeline-dot {
		width: 10px;
		height: 10px;
		background: #000;
		border-radius: 50%;
		border: 2px solid white;
		box-shadow: 0 0 0 1px #e6e6e6;
		position: absolute;
		left: -31px;
		/* Center on line */
		top: 5px;
	}

	.timeline-dot.breaking {
		background: #CC0000;
		width: 14px;
		height: 14px;
		left: -7px;
		top: -7px;
		border: none;
		box-shadow: none;
	}

	/* Sidebar Header */
	.sidebar-title {
		border-top: 4px solid #000;
		padding-top: 10px;
		font-size: 18px;
		font-weight: 700;
		margin-bottom: 20px;
	}

	.breaking-banner {
		position: absolute;
		top: -9px;
		left: 28px;
	}

	*,
	::before,
	::after {
		--tw-border-spacing-x: 0;
		--tw-border-spacing-y: 0;
		--tw-translate-x: 0;
		--tw-translate-y: 0;
		--tw-rotate: 0;
		--tw-skew-x: 0;
		--tw-skew-y: 0;
		--tw-scale-x: 1;
		--tw-scale-y: 1;
		--tw-pan-x: ;
		--tw-pan-y: ;
		--tw-pinch-zoom: ;
		--tw-scroll-snap-strictness: proximity;
		--tw-gradient-from-position: ;
		--tw-gradient-via-position: ;
		--tw-gradient-to-position: ;
		--tw-ordinal: ;
		--tw-slashed-zero: ;
		--tw-numeric-figure: ;
		--tw-numeric-spacing: ;
		--tw-numeric-fraction: ;
		--tw-ring-inset: ;
		--tw-ring-offset-width: 0px;
		--tw-ring-offset-color: #fff;
		--tw-ring-color: rgb(59 130 246 / 0.5);
		--tw-ring-offset-shadow: 0 0 #0000;
		--tw-ring-shadow: 0 0 #0000;
		--tw-shadow: 0 0 #0000;
		--tw-shadow-colored: 0 0 #0000;
		--tw-blur: ;
		--tw-brightness: ;
		--tw-contrast: ;
		--tw-grayscale: ;
		--tw-hue-rotate: ;
		--tw-invert: ;
		--tw-saturate: ;
		--tw-sepia: ;
		--tw-drop-shadow: ;
		--tw-backdrop-blur: ;
		--tw-backdrop-brightness: ;
		--tw-backdrop-contrast: ;
		--tw-backdrop-grayscale: ;
		--tw-backdrop-hue-rotate: ;
		--tw-backdrop-invert: ;
		--tw-backdrop-opacity: ;
		--tw-backdrop-saturate: ;
		--tw-backdrop-sepia: ;
		--tw-contain-size: ;
		--tw-contain-layout: ;
		--tw-contain-paint: ;
		--tw-contain-style:
	}

	::backdrop {
		--tw-border-spacing-x: 0;
		--tw-border-spacing-y: 0;
		--tw-translate-x: 0;
		--tw-translate-y: 0;
		--tw-rotate: 0;
		--tw-skew-x: 0;
		--tw-skew-y: 0;
		--tw-scale-x: 1;
		--tw-scale-y: 1;
		--tw-pan-x: ;
		--tw-pan-y: ;
		--tw-pinch-zoom: ;
		--tw-scroll-snap-strictness: proximity;
		--tw-gradient-from-position: ;
		--tw-gradient-via-position: ;
		--tw-gradient-to-position: ;
		--tw-ordinal: ;
		--tw-slashed-zero: ;
		--tw-numeric-figure: ;
		--tw-numeric-spacing: ;
		--tw-numeric-fraction: ;
		--tw-ring-inset: ;
		--tw-ring-offset-width: 0px;
		--tw-ring-offset-color: #fff;
		--tw-ring-color: rgb(59 130 246 / 0.5);
		--tw-ring-offset-shadow: 0 0 #0000;
		--tw-ring-shadow: 0 0 #0000;
		--tw-shadow: 0 0 #0000;
		--tw-shadow-colored: 0 0 #0000;
		--tw-blur: ;
		--tw-brightness: ;
		--tw-contrast: ;
		--tw-grayscale: ;
		--tw-hue-rotate: ;
		--tw-invert: ;
		--tw-saturate: ;
		--tw-sepia: ;
		--tw-drop-shadow: ;
		--tw-backdrop-blur: ;
		--tw-backdrop-brightness: ;
		--tw-backdrop-contrast: ;
		--tw-backdrop-grayscale: ;
		--tw-backdrop-hue-rotate: ;
		--tw-backdrop-invert: ;
		--tw-backdrop-opacity: ;
		--tw-backdrop-saturate: ;
		--tw-backdrop-sepia: ;
		--tw-contain-size: ;
		--tw-contain-layout: ;
		--tw-contain-paint: ;
		--tw-contain-style:
	}

	/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
	*,
	::after,
	::before {
		box-sizing: border-box;
		border-width: 0;
		border-style: solid;
		border-color: #e5e7eb
	}

	::after,
	::before {
		--tw-content: ''
	}

	:host,
	html {
		line-height: 1.5;
		-webkit-text-size-adjust: 100%;
		-moz-tab-size: 4;
		tab-size: 4;
		font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		font-feature-settings: normal;
		font-variation-settings: normal;
		-webkit-tap-highlight-color: transparent
	}

	body {
		margin: 0;
		line-height: inherit
	}

	hr {
		height: 0;
		color: inherit;
		border-top-width: 1px
	}

	abbr:where([title]) {
		-webkit-text-decoration: underline dotted;
		text-decoration: underline dotted
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-size: inherit;
		font-weight: inherit
	}

	a {
		color: inherit;
		text-decoration: inherit
	}

	b,
	strong {
		font-weight: bolder
	}

	code,
	kbd,
	pre,
	samp {
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
		font-feature-settings: normal;
		font-variation-settings: normal;
		font-size: 1em
	}

	small {
		font-size: 80%
	}

	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline
	}

	sub {
		bottom: -.25em
	}

	sup {
		top: -.5em
	}

	table {
		text-indent: 0;
		border-color: inherit;
		border-collapse: collapse
	}

	button,
	input,
	optgroup,
	select,
	textarea {
		font-family: inherit;
		font-feature-settings: inherit;
		font-variation-settings: inherit;
		font-size: 100%;
		font-weight: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		color: inherit;
		margin: 0;
		padding: 0
	}

	button,
	select {
		text-transform: none
	}

	button,
	input:where([type=button]),
	input:where([type=reset]),
	input:where([type=submit]) {
		-webkit-appearance: button;
		background-color: transparent;
		background-image: none
	}

	:-moz-focusring {
		outline: auto
	}

	:-moz-ui-invalid {
		box-shadow: none
	}

	progress {
		vertical-align: baseline
	}

	::-webkit-inner-spin-button,
	::-webkit-outer-spin-button {
		height: auto
	}

	[type=search] {
		-webkit-appearance: textfield;
		outline-offset: -2px
	}

	::-webkit-search-decoration {
		-webkit-appearance: none
	}

	::-webkit-file-upload-button {
		-webkit-appearance: button;
		font: inherit
	}

	summary {
		display: list-item
	}

	blockquote,
	dd,
	dl,
	figure,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	hr,
	p,
	pre {
		margin: 0
	}

	fieldset {
		margin: 0;
		padding: 0
	}

	legend {
		padding: 0
	}

	menu,
	ol,
	ul {
		list-style: none;
		margin: 0;
		padding: 0
	}

	dialog {
		padding: 0
	}

	textarea {
		resize: vertical
	}

	input::placeholder,
	textarea::placeholder {
		opacity: 1;
		color: #9ca3af
	}

	[role=button],
	button {
		cursor: pointer
	}

	:disabled {
		cursor: default
	}


	[hidden]:where(:not([hidden=until-found])) {
		display: none
	}

	.container {
		width: 100%
	}

	@media (min-width: 640px) {
		.container {
			max-width: 640px
		}
	}

	@media (min-width: 768px) {
		.container {
			max-width: 768px
		}
	}

	@media (min-width: 1024px) {
		.container {
			max-width: 1024px
		}
	}

	@media (min-width: 1280px) {
		.container {
			max-width: 1280px
		}
	}

	@media (min-width: 1536px) {
		.container {
			max-width: 1536px
		}
	}

	/* .collapse {
		visibility: collapse
	} */

	.m-0 {
		margin: 0px
	}

	.mx-auto {
		margin-left: auto;
		margin-right: auto
	}

	.my-3 {
		margin-top: 0.75rem;
		margin-bottom: 0.75rem
	}

	.my-4 {
		margin-top: 1rem;
		margin-bottom: 1rem
	}

	.mb-2 {
		margin-bottom: 0.5rem
	}

	.ml-1 {
		margin-left: 0.25rem
	}

	.mr-4 {
		margin-right: 1rem
	}

	.mr-6 {
		margin-right: 1.5rem
	}

	.mt-2 {
		margin-top: 0.5rem
	}

	.mb-0 {
		margin-bottom: 0px
	}

	.mb-3 {
		margin-bottom: 0.75rem
	}

	.mb-4 {
		margin-bottom: 1rem
	}

	.me-2 {
		margin-inline-end: 0.5rem
	}

	.mt-3 {
		margin-top: 0.75rem
	}

	.inline-block {
		display: inline-block
	}

	.flex {
		display: flex
	}

	.hidden {
		display: none
	}

	.h-2 {
		height: 0.5rem
	}

	.w-2 {
		width: 0.5rem
	}

	.min-w-\[800px\] {
		min-width: 800px
	}

	.translate-y-\[1px\] {
		--tw-translate-y: 1px;
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
	}

	.cursor-pointer {
		cursor: pointer
	}

	.flex-wrap {
		flex-wrap: wrap
	}

	.flex-nowrap {
		flex-wrap: nowrap
	}

	.items-end {
		align-items: flex-end
	}

	.items-center {
		align-items: center
	}

	.gap-1 {
		gap: 0.25rem
	}

	.gap-4 {
		gap: 1rem
	}

	.gap-2 {
		gap: 0.5rem
	}

	.gap-3 {
		gap: 0.75rem
	}

	.overflow-x-auto {
		overflow-x: auto
	}

	.rounded-full {
		border-radius: 9999px
	}

	.rounded-sm {
		border-radius: 0.125rem
	}

	.bg-\[\#CC0000\] {
		--tw-bg-opacity: 1;
		background-color: rgb(204 0 0 / var(--tw-bg-opacity, 1))
	}

	.p-3 {
		padding: 0.75rem
	}

	.px-1\.5 {
		padding-left: 0.375rem;
		padding-right: 0.375rem
	}

	.py-0\.5 {
		padding-top: 0.125rem;
		padding-bottom: 0.125rem
	}

	.py-3 {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem
	}

	.py-5 {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem
	}

	.pb-4 {
		padding-bottom: 1rem
	}

	.text-center {
		text-align: center
	}

	.text-start {
		text-align: start
	}

	.text-2xl {
		font-size: 1.5rem;
		line-height: 2rem
	}

	.text-\[10px\] {
		font-size: 10px
	}

	.text-base {
		font-size: 1rem;
		line-height: 1.5rem
	}

	.text-lg {
		font-size: 1.125rem;
		line-height: 1.75rem
	}

	.text-sm {
		font-size: 0.875rem;
		line-height: 1.25rem
	}

	.text-xl {
		font-size: 1.25rem;
		line-height: 1.75rem
	}

	.font-bold {
		font-weight: 700
	}

	.uppercase {
		text-transform: uppercase
	}

	.leading-none {
		line-height: 1
	}

	.leading-snug {
		line-height: 1.375
	}

	.text-black {
		--tw-text-opacity: 1;
		color: rgb(0 0 0 / var(--tw-text-opacity, 1))
	}

	.text-gray-700 {
		--tw-text-opacity: 1;
		color: rgb(55 65 81 / var(--tw-text-opacity, 1))
	}

	.text-white {
		--tw-text-opacity: 1;
		color: rgb(255 255 255 / var(--tw-text-opacity, 1))
	}

	.opacity-60 {
		opacity: 0.6
	}

	.transition {
		transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
		transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
		transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms
	}

	.hover\:opacity-100:hover {
		opacity: 1
	}

	@media (min-width: 768px) {
		.md\:flex {
			display: flex
		}

		.md\:min-w-0 {
			min-width: 0px
		}

		.md\:text-4xl {
			font-size: 2.25rem;
			line-height: 2.5rem
		}

		.md\:text-lg {
			font-size: 1.125rem;
			line-height: 1.75rem
		}
	}

	@media (min-width: 1280px) {
		.xl\:flex {
			display: flex
		}
	}