/* ===== ABOUT-SPECIFIC ===== */
.about-hero {
	
	max-width: var(--maxw);
	
	margin: 0 auto;
	
	padding: 120px var(--pad-x) 80px;
	
}

.about-hero .eyebrow {
	
	margin-bottom: 40px;
	
}

.about-hero h1 {
	
	margin-bottom: 60px;
	
	font-family: var(--ff-sans);
	font-weight: 500;
	font-size: clamp(64px, 14vw, 120px);
	line-height: 0.85;
	
	letter-spacing: -0.045em;
	
}

.about-hero .lede {
	
	display: grid;
	
	grid-template-columns: 1fr 1.4fr;
	gap: 60px;
	
	padding-top: 40px;
	
	border-top: 1px solid var(--line);
	
}

.about-hero .lede .meta {
	
	color: var(--fg-muted);
	
	font-family: var(--ff-mono);
	font-size: 11px;
	text-transform: uppercase;
	
	letter-spacing: 0.14em;
	
}

.about-hero .lede .meta b {
	
	display: block;
	
	margin-bottom: 4px;
	
	color: var(--fg);
	
	font-weight: 400;
	
}

.about-hero .lede .meta p {
	
	margin-bottom: 16px;
	
	line-height: 1.8;
	
}

.about-hero .lede .body {
	
	color: var(--fg);
	
	font-family: var(--ff-jp);
	font-size: clamp(15px, 1.4vw, 19px);/* clamp(18px, 1.6vw, 24px) */
	
	line-height: 1.7;
	
	text-wrap: pretty;
	
}

/* ===== PROFILE TABLE ===== */
.profile {
	
	display: grid;
	
	grid-template-columns: 1fr 2fr;
	gap: clamp(40px, 6vw, 100px);
	
	max-width: var(--maxw);
	
	margin: 0 auto;
	
	padding: clamp(80px, 12vh, 140px) var(--pad-x);
	
}

.profile .head {
	
	position: sticky;
	
	top: 120px;
	
	align-self: start;
	
}

.profile .head .idx {
	
	margin-bottom: 24px;
	
	color: var(--fg-muted);
	
	font-family: var(--ff-mono);
	font-size: 12px;
	
	letter-spacing: 0.14em;
	
}

.profile .head h2 {
	
	font-family: var(--ff-sans);
	font-weight: 500;
	font-size: clamp(40px, 5vw, 80px);
	line-height: 0.92;
	
	letter-spacing: -0.035em;
	
}

.profile dl {
	
	border-top: 1px solid var(--line);
	
}

.profile .row {
	
	display: grid;
	
	grid-template-columns: 200px 1fr;
	gap: 24px;
	
	padding: 24px 0;
	
	border-bottom: 1px solid var(--line);
	
	transition: padding 0.4s var(--ease);
	
}

.profile .row:hover {
	
	padding-left: 8px;
	
}

.profile dt {
	
	padding-top: 3px;
	
	color: var(--fg-muted);
	
	font-family: var(--ff-mono);
	font-size: 11px;
	text-transform: uppercase;
	
	letter-spacing: 0.14em;
	
}

.profile dt .ja {
	
	color: var(--fg);
	
	font-family: var(--ff-jp);
	font-size: 18px;
	font-weight: 500;
	
}

.profile dt .en {
	
	padding-top: 8px;
	
}

.profile dd {
	
	color: var(--fg);
	
	font-family: var(--ff-jp);
	font-size: 16px;
	line-height: 1.7;
	
}

.profile dd .mono {
	
	font-family: var(--ff-mono);
	font-size: 14px;
	
	letter-spacing: 0.04em;
	
}

.profile dd ul {
	
	list-style: none;
	
}

.profile dd ul li {
	
	padding: 2px 0;
	
}

.profile dd ul li::before {
	
	margin-right: 12px;
	
	color: var(--fg-muted);
	
	content: "—";
	
}

/* ===== STATS row ===== */
.stats {

	position: relative;

	padding: 60px var(--pad-x);

}

.stats::before,
.stats::after {

	position: absolute;

	left: 50%;

	transform: translateX(-50%);

	width: calc(100% - 2 * var(--pad-x));
	height: 1px;

	max-width: calc(var(--maxw) - 2 * var(--pad-x));

	background: var(--line);

	content: "";

}

.stats::before {

	top: 0;

}

.stats::after {

	bottom: 0;

}

.stats .row {

	display: grid;

	grid-template-columns: repeat(4, 1fr);
	gap: 40px;

	max-width: calc(var(--maxw) - 2 * var(--pad-x));

	margin: 0 auto;

}

.stat .label {
	
	display: block;
	
	margin-bottom: 18px;
	
}

.stat .num {
	
	margin-bottom: 8px;
	
	font-family: var(--ff-sans);
	font-weight: 500;
	font-size: clamp(48px, 5.5vw, 88px);
	line-height: 0.9;
	
	letter-spacing: -0.035em;
	
}

.stat .num .unit {
	
	margin-left: 4px;
	
	color: var(--fg-muted);
	
	font-size: 0.4em;
	
	letter-spacing: 0.02em;
	
}

.stat .cap {
	
	color: var(--fg-muted);
	
	font-family: var(--ff-mono);
	font-size: 11px;
	
	letter-spacing: 0.1em;
	
	text-transform: uppercase;
	
}

/* ===== MAP plate ===== */
.map-plate {
	
	display: grid;
	
	grid-template-columns: 1fr 1.4fr;
	gap: 60px;
	align-items: start;/* end */
	
	max-width: var(--maxw);
	
	margin: 0 auto;
	
	padding: clamp(80px, 12vh, 140px) var(--pad-x);
	
}

.map-plate .label {
	
	margin-bottom: 24px;
	
}

.map-plate .meta {
	
	font-size: 14px;
	line-height: 1.8;
	
}

.map-plate .meta h3 {
	
	margin-bottom: 24px;
	
	font-family: var(--ff-sans);
	font-size: clamp(32px, 4vw, 64px);
	font-weight: 500;
	line-height: 0.95;
	
	letter-spacing: -0.03em;
	
}

.map-plate .meta .message {
	
	max-width: 32ch;
	
	margin-top: 16px;
	
	color: var(--fg-muted);
	
}

.map-plate .meta .addr {
	
	display: block;
	
	margin-top: 24px;
	
	color: var(--fg-muted);
	
	font-family: var(--ff-mono);
	font-size: 12px;
	
	text-transform: uppercase;
	
	letter-spacing: 0.12em;
	
}

.map-plate .addr strong {
	
	display: block;
	
	margin-top: 4px;
	
	color: var(--fg);
	
	font-family: var(--ff-jp);
	font-size: 14px;
	font-weight: 400;
	
	text-transform: none;
	
	letter-spacing: 0.02em;
	
}

.map {
	
	aspect-ratio: 4/3;
	
	position: relative;
	
	overflow: hidden;
	
	border: 1px solid var(--line);
	
	background: var(--bg-2);
	
}

.map svg {
	
	display: block;
	
	width: 100%;
	height: 100%;
	
}

.map .pin {
	
	position: absolute;
	
	top: 50%;
	left: 50%;
	
	transform: translate(-50%, -50%);
	
	text-align: center;
	
}

.map .pin .dot {
	
	width: 12px;
	height: 12px;
	
	margin: 0 auto 10px;
	
	background: var(--fg);
	
	border-radius: 50%;
	
	box-shadow:
		0 0 0 8px rgba(15,15,15,0.08),
		0 0 0 24px rgba(15,15,15,0.04);
	
	animation: pulse 2.4s ease-in-out infinite;
	
}

html[data-theme="dark"] .map .pin .dot {
	box-shadow:
		0 0 0 8px rgba(245,243,238,0.1),
		0 0 0 24px rgba(245,243,238,0.05);
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.4); }
}

.map .pin .tag {
	
	color: var(--fg);
	
	font-family: var(--ff-mono);
	font-size: 11px;
	
	letter-spacing: 0.16em;
	
	text-transform: uppercase;
	
}

/* ===== CTA ===== */
.closer {
	
	padding: clamp(120px, 18vh, 220px) var(--pad-x);
	
	border-top: 1px solid var(--line);
	
	text-align: center;
	
}

.closer .eyebrow {
	
	margin-bottom: 28px;
	
}

.closer .big {
	
	margin-bottom: 40px;
	
	font-family: var(--ff-sans);
	font-weight: 500;
	font-size: clamp(56px, 11vw, 200px);
	line-height: 0.88;
	
	letter-spacing: -0.045em;
	
}

.closer .big em {
	
	font-family: "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
	
}

@media (max-width: 860px) {
	
	.about-hero .lede {
		
		grid-template-columns: 1fr;
		gap: 30px;
		
	}
	
	.profile {
		
		grid-template-columns: 1fr;
		
	}
	
	.profile .head {
		
		position: static;
		
	}
	
	.profile .row {
		
		grid-template-columns: 1fr;
		gap: 8px;
		
		padding: 16px 0;
		
	}
	
	.stats .row {
		
		grid-template-columns: 1fr 1fr;
		gap: 30px;
		
	}
	
	.map-plate {
		
		grid-template-columns: 1fr;
		
	}
	
}