@media (max-width: 560px) {
	.story-stage {
		padding: 44px 0;
	}

	.story-stage .section-heading {
		margin-bottom: 14px;
	}

	.story-stage .section-heading .kicker {
		display: none;
	}

	.story-stage .section-heading h2 {
		font-size: 1.55rem;
		text-align: left;
	}

	.story-shell {
		display: block;
		overflow: hidden;
		border: 1px solid var(--line);
		border-radius: 8px;
		background: rgba(17, 25, 37, 0.48);
	}

	.story {
		display: flex;
		flex-direction: column;
		max-height: 52px;
		margin-bottom: 0;
		overflow: hidden;
		border: 0;
		border-radius: 0;
		background: transparent;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: max-height 240ms ease, background-color 180ms ease;
	}

	.story + .story {
		border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
	}

	.story.active {
		max-height: 1080px;
		background: color-mix(in srgb, var(--card) 86%, var(--accent) 14%);
	}

	.story.active.expanded {
		max-height: 1600px;
	}

	.story-toggle {
		position: relative;
		order: 1;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 14px;
		width: 100%;
		min-height: 52px;
		padding: 14px 44px 14px 16px;
		border: 0;
		background: transparent;
		color: var(--muted);
		font: inherit;
		font-weight: 700;
		text-align: left;
	}

	.story-toggle span {
		color: var(--accent);
		font-size: 0.78rem;
	}

	.story-toggle::after {
		content: "+";
		position: absolute;
		right: 16px;
		color: var(--accent-2);
		font-size: 1.1rem;
		font-weight: 400;
	}

	.story.active .story-toggle {
		color: var(--ink);
	}

	.story.active .story-toggle::after {
		content: "-";
	}

	.story-copy {
		order: 3;
		padding: 0 16px 8px;
		opacity: 0;
		text-align: left;
		transform: translateY(-6px);
		transition: opacity 220ms ease, transform 240ms ease;
		visibility: hidden;
	}

	.story-copy .kicker {
		display: none;
	}

	.story-copy h3 {
		margin-bottom: 12px;
		font-size: 1.28rem;
		text-align: left;
	}

	.story-copy p {
		margin-bottom: 10px;
		font-size: 0.96rem;
	}

	.story-copy h3 + p {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.story.expanded .story-copy h3 + p {
		display: block;
		overflow: visible;
	}

	.story:not(.expanded) .read-more ~ p {
		display: none;
	}

	.story.expanded .read-more {
		display: none;
	}

	.read-more {
		display: inline-flex;
		align-items: center;
		min-height: 34px;
		margin: 4px 0 12px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--accent-2);
		font: inherit;
		font-size: 0.94rem;
		font-weight: 800;
	}

	.story-points {
		display: none;
	}

	.story-media {
		order: 2;
		display: block;
		min-height: 0;
		aspect-ratio: 16 / 9;
		margin: 0 16px 14px;
		border: 1px solid var(--line);
		border-radius: 8px;
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity 220ms ease, transform 240ms ease;
		visibility: hidden;
	}

	.story-media.has-rotator img,
	.story-media.has-rotator video {
		display: none;
		position: static;
		inset: auto;
		opacity: 1;
		transition: none;
	}

	.story-media.has-rotator img:first-child,
	.story-media.has-rotator video:first-child {
		display: block;
	}

	.story.active .story-copy,
	.story.active .story-media {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}

	.pager button,
	.button {
		width: 100%;
	}

	@media (prefers-reduced-motion: reduce) {
		.story,
		.story-copy,
		.story-media {
			transition: none;
		}
	}
}