.mad-story-summary {
	--mad-red: #e3131b;
	--mad-ink: #101010;
	--mad-paper: #f8f4ed;
	width: 100%;
	margin: 1.75rem 0 2.25rem;
	font-family: inherit;
}

.mad-story-summary__details {
	overflow: hidden;
	border: 1px solid rgba(16, 16, 16, .16);
	border-left: 4px solid var(--mad-red);
	border-radius: 10px;
	background: var(--mad-ink);
	box-shadow: 0 14px 34px rgba(16, 16, 16, .13);
}

.mad-story-summary__toggle {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 14px;
	min-height: 82px;
	padding: 15px 18px;
	color: #fff;
	cursor: pointer;
	list-style: none;
	transition: background-color .25s ease, padding .25s ease;
}

.mad-story-summary__toggle::-webkit-details-marker { display: none; }
.mad-story-summary__toggle:hover { background: #1b1b1b; }
.mad-story-summary__toggle:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }

.mad-story-summary__mark {
	display: grid;
	grid-template-columns: repeat(3, 5px);
	align-items: end;
	gap: 3px;
	width: 30px;
	height: 30px;
	padding: 6px;
	border-radius: 50%;
	background: var(--mad-red);
}

.mad-story-summary__mark span { display: block; border-radius: 9px; background: #fff; }
.mad-story-summary__mark span:nth-child(1) { height: 8px; }
.mad-story-summary__mark span:nth-child(2) { height: 16px; }
.mad-story-summary__mark span:nth-child(3) { height: 12px; }

.mad-story-summary__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mad-story-summary__copy small { color: #ff565c; font-size: 10px; font-weight: 900; letter-spacing: .16em; line-height: 1.2; }
.mad-story-summary__copy strong { color: #fff; font-size: clamp(15px, 1.45vw, 20px); font-weight: 850; letter-spacing: -.015em; line-height: 1.15; }
.mad-story-summary__meta { color: rgba(255,255,255,.68); font-size: 12px; font-weight: 700; white-space: nowrap; }

.mad-story-summary__chevron {
	width: 11px;
	height: 11px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg) translateY(-3px);
	transition: transform .3s ease;
}

.mad-story-summary__details[open] .mad-story-summary__chevron { transform: rotate(225deg) translate(-2px, -2px); }
.mad-story-summary__details > .mad-story-summary__reveal { display: grid !important; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .42s cubic-bezier(.2,.8,.2,1), opacity .28s ease; }
.mad-story-summary__details[open] > .mad-story-summary__reveal { grid-template-rows: 1fr; opacity: 1; }
.mad-story-summary__reveal-inner { min-height: 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,.12); }

.mad-story-summary__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 18px 12px;
}

.mad-story-summary__toolbar p { margin: 0; color: rgba(255,255,255,.7); font-size: 12px; }
.mad-story-summary__controls { display: flex; align-items: center; gap: 8px; }
.mad-story-summary__counter { min-width: 42px; color: #fff; font-size: 11px; font-weight: 800; text-align: center; }

.mad-story-summary__arrow {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.3);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.mad-story-summary__arrow:hover { border-color: var(--mad-red); background: var(--mad-red); transform: translateY(-1px); }
.mad-story-summary__arrow:disabled { opacity: .3; cursor: default; transform: none; background: transparent; }

.mad-story-summary__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(280px, 405px);
	gap: 14px;
	overflow-x: auto;
	padding: 0 18px 16px;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 18px;
	scrollbar-width: thin;
	scrollbar-color: var(--mad-red) rgba(255,255,255,.1);
	overscroll-behavior-inline: contain;
}

.mad-story-summary__slide {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 8px;
	background: #080808;
	scroll-snap-align: start;
}

.mad-story-summary__image-link { display: block; background: #050505; }
.mad-story-summary__image-link img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; background: #151515; }
.mad-story-summary__slide figcaption { display: flex; gap: 10px; align-items: flex-start; min-height: 52px; margin: 0; padding: 12px 13px; color: rgba(255,255,255,.78); font-size: 11px; line-height: 1.35; }
.mad-story-summary__slide figcaption span { color: #ff4a50; font-weight: 900; letter-spacing: .08em; }

.mad-story-summary__progress { height: 3px; margin: 0 18px 18px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.12); }
.mad-story-summary__progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mad-red); transition: width .28s ease; }

@media (max-width: 680px) {
	.mad-story-summary { margin: 1.25rem 0 1.75rem; }
	.mad-story-summary__toggle { grid-template-columns: auto 1fr auto; min-height: 76px; gap: 11px; padding: 13px 14px; }
	.mad-story-summary__meta { display: none; }
	.mad-story-summary__mark { width: 28px; height: 28px; }
	.mad-story-summary__toolbar { padding: 13px 14px 10px; }
	.mad-story-summary__toolbar p { font-size: 11px; }
	.mad-story-summary__track { grid-auto-columns: 86vw; gap: 10px; padding: 0 14px 14px; scroll-padding-inline: 14px; }
	.mad-story-summary__progress { margin: 0 14px 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.mad-story-summary__details > .mad-story-summary__reveal,
	.mad-story-summary__chevron,
	.mad-story-summary__arrow,
	.mad-story-summary__progress span { transition: none; }
}