/* ===== Page 3: Stories ===== */

/* Section 1 — Stories Hero */
.stories-hero {
	background: radial-gradient(
			520px 320px at -10% -20%,
			rgba(255, 68, 85, 0.1),
			transparent 60%
		),
		radial-gradient(
			520px 320px at 110% 120%,
			rgba(58, 209, 161, 0.08),
			transparent 60%
		);
}
.stories-hero-wrap {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 24px;
	align-items: center;
}
.stories-copy p {
	color: #cfd3db;
}
.stories-hero-media {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.story-card {
	margin: 0;
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 12px;
	text-align: center;
	box-shadow: var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.story-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.22);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}
.story-card img {
	border-radius: 12px;
}
.story-card figcaption {
	color: #aeb6c3;
	margin-top: 6px;
	font-size: 14px;
}

/* Section 2 — Field Log (longform) */
.field-log {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}
.log-wrap {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 20px;
	align-items: start;
}
.log-prose p {
	margin-bottom: 12px;
}
.pull {
	margin: 14px 0;
	padding: 12px 14px;
	font-style: italic;
	color: #e6e7ea;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
}
.pull cite {
	display: block;
	margin-top: 6px;
	font-style: normal;
	color: #aeb6c3;
	font-size: 14px;
}
.log-insets {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.inset {
	margin: 0;
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 10px;
	text-align: center;
	box-shadow: var(--shadow);
}
.inset img {
	border-radius: 12px;
}
.inset figcaption {
	color: #aeb6c3;
	margin-top: 6px;
	font-size: 14px;
}

/* Section 3 — Media Kit */
.media-kit {
	background: radial-gradient(
		900px 360px at 100% 0%,
		rgba(58, 209, 161, 0.08),
		transparent 60%
	);
}
.assets-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 14px;
}
.asset {
	margin: 0;
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 12px;
	text-align: center;
	box-shadow: var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.asset:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.22);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}
.asset img {
	border-radius: 12px;
}
.asset figcaption {
	color: #aeb6c3;
	margin-top: 6px;
	font-size: 14px;
}
.media-cta {
	margin-top: 16px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 1024px) {
	.stories-hero-wrap {
		grid-template-columns: 1fr;
	}
	.log-wrap {
		grid-template-columns: 1fr;
	}
	.assets-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.assets-grid {
		grid-template-columns: 1fr;
	}
}
/* ===== Section 4 — Behind the Hands ===== */
.hands {
	background: radial-gradient(
		880px 360px at 100% 0%,
		rgba(58, 209, 161, 0.08),
		transparent 60%
	);
}
.hands-wrap {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 20px;
	align-items: start;
}
.hands-copy p {
	color: #cfd3db;
}
.hands-bullets {
	margin: 10px 0 0 18px;
}
.hands-bullets li {
	margin: 6px 0;
}
.hands-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.hands-card {
	margin: 0;
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 10px;
	text-align: center;
	box-shadow: var(--shadow);
}
.hands-card img {
	border-radius: 12px;
}
.hands-card figcaption {
	color: #aeb6c3;
	margin-top: 6px;
	font-size: 14px;
}

/* ===== Section 5 — Press & Mentions ===== */
.press {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}
.press-quotes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 14px;
}
.press-quote {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 16px;
	box-shadow: var(--shadow);
}
.press-quote blockquote {
	margin: 0 0 10px;
	font-style: italic;
	color: #e6e7ea;
}
.press-source {
	margin: 0;
	color: #aeb6c3;
	font-size: 14px;
}
.press-logos {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	align-items: center;
}
.press-logo {
	margin: 0;
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 10px;
	text-align: center;
	box-shadow: var(--shadow);
}
.press-logo img {
	border-radius: 8px;
}

/* ===== Section 6 — Download & Contact ===== */
.stories-cta {
	background: radial-gradient(
		900px 360px at -10% 100%,
		rgba(255, 68, 85, 0.08),
		transparent 60%
	);
}
.cta-wrap {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 18px;
	align-items: center;
}
.cta-figure {
	margin: 0;
	text-align: center;
}
.cta-figure img {
	border-radius: 12px;
	box-shadow: var(--shadow);
}
.cta-figure figcaption {
	color: #aeb6c3;
	margin-top: 6px;
	font-size: 14px;
}
.cta-copy p {
	color: #cfd3db;
}
.cta-points {
	margin: 10px 0 0 18px;
}
.cta-points li {
	margin: 6px 0;
}

/* Responsive (sections 4–6) */
@media (max-width: 1024px) {
	.hands-wrap {
		grid-template-columns: 1fr;
	}
	.press-quotes {
		grid-template-columns: 1fr 1fr;
	}
	.press-logos {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.cta-wrap {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 640px) {
	.press-quotes {
		grid-template-columns: 1fr;
	}
	.press-logos {
		grid-template-columns: 1fr;
	}
}
/* ===== Section 7 — Routes ===== */
.routes {
	background: radial-gradient(
		900px 360px at 100% 0%,
		rgba(58, 209, 161, 0.08),
		transparent 60%
	);
}
.routes-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 14px;
}
.route-card {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 14px;
	box-shadow: var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.route-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.22);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}
.route-fig {
	margin: 0;
	text-align: center;
}
.route-fig img {
	border-radius: 12px;
}
.route-fig figcaption {
	color: #aeb6c3;
	margin-top: 6px;
	font-size: 14px;
}
.routes-bullets {
	margin: 14px 0 0 18px;
	color: #cfd3db;
}
.routes-bullets li {
	margin: 6px 0;
}

/* ===== Section 8 — Storyboard ===== */
.storyboard {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}
.storyboard-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 14px;
}
.sb-frame {
	margin: 0;
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 10px;
	text-align: center;
	box-shadow: var(--shadow);
}
.sb-frame img {
	border-radius: 12px;
}
.sb-frame figcaption {
	color: #aeb6c3;
	margin-top: 6px;
	font-size: 14px;
}
.storyboard-text p {
	color: #cfd3db;
	margin-top: 12px;
}

/* ===== Section 9 — Media & Usage FAQ ===== */
.media-faq {
	background: radial-gradient(
		900px 360px at -10% 100%,
		rgba(255, 68, 85, 0.08),
		transparent 60%
	);
}
.faq-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 14px;
}
.faq-card {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 14px;
	box-shadow: var(--shadow);
}
.faq-fig {
	margin: 0 0 8px 0;
	text-align: center;
}
.faq-fig img {
	border-radius: 12px;
}
.faq-fig figcaption {
	color: #aeb6c3;
	margin-top: 6px;
	font-size: 14px;
}

/* Responsive (sections 7–9) */
@media (max-width: 1024px) {
	.routes-grid {
		grid-template-columns: 1fr 1fr;
	}
	.storyboard-grid {
		grid-template-columns: 1fr;
	}
	.faq-cards {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 600px) {
	.routes-grid {
		grid-template-columns: 1fr;
	}
	.faq-cards {
		grid-template-columns: 1fr;
	}
}
/* ===== Section 10 — Photo Essay ===== */
.essay {
	background: radial-gradient(
		880px 360px at 100% 0%,
		rgba(58, 209, 161, 0.08),
		transparent 60%
	);
}
.essay-wrap {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 20px;
	align-items: start;
}
.essay-copy p {
	color: #cfd3db;
}
.essay-media {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.essay-fig {
	margin: 0;
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 10px;
	text-align: center;
	box-shadow: var(--shadow);
}
.essay-fig img {
	border-radius: 12px;
}
.essay-fig figcaption {
	color: #aeb6c3;
	margin-top: 6px;
	font-size: 14px;
}

/* ===== Section 11 — Community Picks ===== */
.picks {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}
.picks-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 14px;
}
.pick-card {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 14px;
	box-shadow: var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pick-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.22);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}
.pick-fig {
	margin: 0 0 8px;
	text-align: center;
}
.pick-fig img {
	border-radius: 12px;
}
.pick-fig figcaption {
	color: #aeb6c3;
	margin-top: 6px;
	font-size: 14px;
}

/* ===== Section 12 — Final Briefing ===== */
.wrap-brief {
	background: radial-gradient(
		900px 360px at -10% 100%,
		rgba(255, 68, 85, 0.08),
		transparent 60%
	);
}
.wrap-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 18px;
	align-items: start;
}
.wrap-fig {
	margin: 0;
	text-align: center;
}
.wrap-fig img {
	border-radius: 12px;
	box-shadow: var(--shadow);
}
.wrap-fig figcaption {
	color: #aeb6c3;
	margin-top: 6px;
	font-size: 14px;
}
.wrap-copy p {
	color: #cfd3db;
}
.wrap-steps {
	margin: 12px 0 0 18px;
}
.wrap-steps li {
	margin: 6px 0;
}

/* Responsive (sections 10–12) */
@media (max-width: 1024px) {
	.essay-wrap {
		grid-template-columns: 1fr;
	}
	.picks-grid {
		grid-template-columns: 1fr 1fr;
	}
	.wrap-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.picks-grid {
		grid-template-columns: 1fr;
	}
}