/* Duo-Man — adapted from viditb2025_3/style.css + index-style.css (light only) */

:root {
	color-scheme: light;
}

body {
	margin: 0;
	font: 400 16px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	color: #1a1a1a;
	background-color: #fff;
}

.containerWork {
	width: 70%;
	max-width: 1400px;
	margin: 32px auto 0;
}

/* --- Header --- */
.brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.brand__icon {
	display: block;
	width: 128px;
	height: auto;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}

#title {
	margin: 0;
	line-height: 0;
}

.brand__titlemark {
	display: block;
	height: 56px;
	width: auto;
}


.launch-date {
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #5788b1; /* titlemark blue */
	text-align: center;
	margin: 12px 0 24px;
}

.launch-date p {
	margin: 0;
}

.launch-date__preorder {
	font-weight: 500;
	color: #888;
}

/* titlemark blue */
.notify-button {
	display: inline-block;
	margin-top: 16px;
	padding: 12px 28px;
	border-radius: 999px;
	background: #5788b1;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(87, 136, 177, 0.3);
	transition: background 0.25s ease-out, transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.notify-button:hover {
	background: #4a78a0;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(87, 136, 177, 0.35);
}

.notify-button:active {
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(87, 136, 177, 0.3);
}

.notify-button:focus-visible {
	outline: 3px solid rgba(87, 136, 177, 0.45);
	outline-offset: 3px;
}

/* --- Hero video --- */
.video-container {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 24px;
	overflow: hidden;
	background: #f2f2f2;
	margin-bottom: 40px;
}

.video-container video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Copy --- */
#smallTitle2 {
	font-weight: 700;
	font-size: 1.5rem;
	margin: 0 0 8px;
}

.bodyText {
	font-size: 0.95rem;
	margin: 0 0 16px;
	line-height: 1.6;
	max-width: 70%;
}

hr {
	border: 0;
	height: 1px;
	background: rgba(225, 225, 225, 1);
	margin: 48px 0 32px;
}

/* --- Images: front and center --- */
figure {
	margin: 0 0 40px;
}

figure img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.35s ease-out;
}

figure:hover img {
	transform: scale(1.01);
}

.hero-shot img {
	width: 80%;
	margin: 0 auto;
}

figcaption {
	text-align: center;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #555;
	max-width: 560px;
	margin: 4px auto 0;
}

figcaption b {
	color: #1a1a1a;
}

.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 30px;
}

/* --- Footer --- */
.footer {
	margin-top: 60px;
	padding-top: 20px;
	border-top: 1px solid #e5e5e5;
}

.footerText {
	width: 70%;
	max-width: 1400px;
	margin: 0 auto;
	padding-bottom: 50px;
	font-size: 0.875rem;
	color: #888;
}

/* --- Responsive (breakpoints from style.css) --- */
@media all and (max-width: 1500px) and (min-width: 950px) {
	.containerWork, .footerText { width: 80%; }
}

@media all and (max-width: 950px) {
	.containerWork, .footerText { width: 90%; }
	.bodyText { max-width: 100%; }
	.hero-shot img { width: 100%; }
}

@media all and (max-width: 590px) {
	.containerWork, .footerText { width: calc(100% - 32px); }
	.containerWork { margin-top: 24px; }
	.brand__icon { width: 96px; }
	.brand__titlemark { height: 40px; }
	.video-container { border-radius: 16px; margin-bottom: 28px; }
	.grid { grid-template-columns: 1fr; }
	hr { margin: 32px 0 24px; }
}