/* =============================================================================
   Layout primitives + accessibility utilities
   ========================================================================== */

.tt-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.tt-container--sm {
	max-width: var(--container-sm);
}

.tt-container--lg {
	max-width: var(--container-lg);
}

.tt-section {
	padding-block: var(--space-9);
}

@media (max-width: 768px) {
	.tt-section {
		padding-block: var(--space-7);
	}
}

/* Bilingual section heading: `EN / 日本語`  */
.tt-section-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3);
	margin: 0 0 var(--space-7);
}

.tt-section-title__en {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-heading);
	letter-spacing: var(--tracking-heading);
	line-height: var(--lh-heading);
}

.tt-section-title__sep {
	color: var(--tt-muted);
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-display);
}

.tt-section-title__jp {
	font-family: var(--font-body);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--tt-ink-soft);
}

/* Skip link (accessibility — hidden until focused) */

.tt-skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-4);
	padding: var(--space-3) var(--space-5);
	background: var(--tt-ink);
	color: var(--tt-bg);
	font-family: var(--font-heading);
	font-weight: var(--fw-heading);
	border-radius: var(--radius-button);
	z-index: calc(var(--z-header) + 1);
	transition: top var(--dur-base) var(--ease);
}

.tt-skip-link:focus,
.tt-skip-link:focus-visible {
	top: var(--space-4);
	outline: 2px solid var(--tt-bg);
	outline-offset: 2px;
}

/* Visually hidden (screen-reader only) — H1 内のSEO/a11y用テキスト等で利用 */

.tt-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}