/* ===========================================================================
   Contents / landing page
   =========================================================================== */

body.contents { background: #0d1922; }

.contents__wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 104px) clamp(18px, 4vw, 44px) 80px;
}

.contents__head { text-align: center; margin-bottom: 34px; }
.contents__head h1 {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4rem);
	letter-spacing: 0.01em;
	margin: 0 0 0.2em;
}
.contents__by {
	margin: 0;
	color: var(--ink-dim);
	font-style: italic;
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
}

.contents__cover {
	display: block;
	position: relative;
	width: min(320px, 74vw);
	margin: 0 auto 20px;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.75);
	transition: transform 0.4s var(--ease);
}
.contents__cover img { display: block; width: 100%; }
.contents__cover:hover { transform: translateY(-4px) scale(1.01); }
.contents__begin {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 26px 16px 14px;
	text-align: center;
	font-family: var(--display);
	font-size: 1.15rem;
	letter-spacing: 0.04em;
	background: linear-gradient(to top, rgba(6, 12, 20, 0.85), transparent);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}
.contents__cover:hover .contents__begin { opacity: 1; }

/* Mode chooser */
.contents__modes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 auto 56px;
	font-family: var(--display);
}
.contents__modes a {
	text-decoration: none;
	color: var(--ink);
	padding: 7px 16px;
	border: 1px solid var(--panel-line);
	border-radius: 999px;
	font-size: 0.98rem;
	letter-spacing: 0.03em;
	transition: background 0.2s, border-color 0.2s;
}
.contents__modes a:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); }
.contents__modes span {
	color: var(--ink-dim);
	font-style: italic;
	align-self: center;
	font-size: 0.86rem;
	margin-right: 4px;
}

.grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: clamp(14px, 2.4vw, 26px);
}
.grid__cell a {
	display: block;
	position: relative;
	text-decoration: none;
	color: var(--ink);
}
.grid__img {
	display: block;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	filter: saturate(0.92) brightness(0.94);
	transition: transform 0.4s var(--ease), filter 0.3s;
	box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
}
.grid__cell a:hover .grid__img {
	transform: translateY(-4px);
	filter: saturate(1.05) brightness(1);
}
.grid__n {
	position: absolute;
	top: 8px;
	left: 8px;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	display: grid;
	place-items: center;
	font-family: var(--display);
	font-size: 0.95rem;
	border-radius: 6px;
	background: var(--panel);
	border: 1px solid var(--panel-line);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.grid__t {
	display: block;
	margin-top: 10px;
	font-size: 0.98rem;
	line-height: 1.45;
	color: var(--ink-dim);
}

.contents__about {
	max-width: 640px;
	margin: 76px auto 0;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--ink-dim);
	font-size: 1.02rem;
	line-height: 1.6;
}
.contents__about h2 {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--ink);
	margin: 0 0 0.5em;
}
.contents__about a { color: var(--sea-light); text-decoration: none; }
.contents__about a:hover { text-decoration: underline; }