/* Linkage Help — shared stylesheet */

:root {
	--page-bg: #f7f7f7;
	--box-bg: #ffffff;
	--box-border: #e7e7e7;
	--box-border-light: #e2e2e4;
	--box-border-lighter: #eeeeee;
	--text-color: #444444;
	--text-secondary: #666666;
	--link-color: #0068da;
	--radius: 20px;
	--box-border-width: 4px;
	--thin-border-width: 2px;
}

* {
	box-sizing: border-box;
	line-height: 1.3;
}

body {
	margin: 0;
	padding: 64px;
	background-color: var(--page-bg);
	color: var(--text-color);
	font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

.content {
	max-width: 980px;
	margin: 0 auto;
}

.warning {
	margin-bottom: 20px;
	text-align: center;
	color: red;
	font-style: italic;
}

a {
	color: var(--link-color);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* ---------- Welcome box (full width) ---------- */

.welcome-box {
	display: flex;
	overflow: hidden;
	margin-bottom: 32px;
}

.welcome-text {
	flex: 0 0 60%;
	padding: 32px;
}

.welcome-text h1 {
	margin-top: 0;
	font-size: 23px;
	font-weight: 600;
}

.welcome-text h1 sup {
	display: block;
	margin-top: -6px;
	font-weight: 500;
}

.welcome-text p {
	color: var(--text-secondary);
	font-size: 14.5px;
	line-height: 1.4;
	font-weight: 400;
}

.welcome-image {
	flex: 1;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.welcome-image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	padding: 0;
	border: 0;
}

/* ---------- Top-level entry cards (3 across) ---------- */

.card-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-bottom: 32px;
}

.entry-card {
	display: block;
	text-align: center;
	text-decoration: none;
	color: var(--text-color);
}

.entry-card:hover {
	text-decoration: none;
}

.entry-card .card-frame {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 12px;
	position: relative;
}

.entry-card .card-frame img {
	position: absolute;

	top: 50%;
	left: 50%;

	max-width: 90%;
	max-height: 90%;

	width: auto;
	height: auto;

	transform: translate(-50%, -50%);
}

.entry-card .card-title {
	display: block;
	margin-top: 10px;
	font-weight: 500;
	color: var(--text-color);
}

.entry-card .card-text {
	display: block;
	margin-top: 6px;
	line-height: 1.3;
	font-weight: 400;
	font-size: 13px;
	color: var(--text-secondary);
	padding-bottom: 0;
	margin-bottom: 0;
	margin-left: 2px;
	margin-right: 2px;

}

.entry-card: hover .card-title {
	text-decoration: none;
}

.entry-card:hover div.top-box {
	border-color: #8ABBEF;
}

.top-box {
	background-color: var(--box-bg);
	border: var(--box-border-width) solid var(--box-border);
	border-radius: var(--radius);
}

/* ---------- Separator ---------- */

.section-divider {
	border: none;
	border-top: 1px solid var(--box-border-light);
	margin: 32px 0;
}

/* ---------- Topic group boxes (3 across, lighter border) ---------- */

.topic-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.topic-box {
	background-color: var(--box-bg);
	border: var(--thin-border-width) solid var(--box-border-lighter);
	border-radius: var(--radius);
	padding: 18px;
}

.topic-box-header {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
}

.topic-box-header img.topic-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	margin-top: 0px;
}

.topic-box-header h2 {
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
	margin-top: 2px;
}

.topic-box ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.topic-box li {
	margin-bottom: 8px;
}

.topic-box li:last-child {
	margin-bottom: 0;
}

.topic-box a {
	font-size: 14px;
}

/* ---------- Responsive fallback ---------- */

@media (max-width: 720px) {
	.welcome-box {
		flex-direction: column;
	}
	.welcome-text,
	.welcome-image {
		flex: 1 1 auto;
	}
	.card-row,
	.topic-grid {
		grid-template-columns: 1fr;
	}
}