/* page-about.css — About */

/* Head (黒帯 + 写真半透明オーバーレイ) */
.about-head {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--xxl);
	position: relative;
	overflow: hidden;
}
.about-head__inner {
	position: relative;
	z-index: 2;
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
}
.about-head__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--md);
}
.about-head__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 9vw, 7rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	margin: 0;
}
.about-head__photo {
	position: absolute;
	right: 0; top: 0; bottom: 0;
	width: 50%;
	opacity: 0.18;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.about-head__photo-placeholder {
	width: 100%; height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--xs);
	background-image:
		linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
	background-size: 40px 40px;
}

/* Story (asymmetric split) */
.about-story { background: var(--wp--preset--color--base); padding-block: var(--wp--preset--spacing--xxl); }
.about-story__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
	display: grid;
	gap: var(--wp--preset--spacing--lg);
}
.about-story__vertical {
	font-family: serif;
	font-size: clamp(1.4rem, 2.8vw, 2rem);
	font-weight: 700;
	color: var(--wp--preset--color--brand);
	writing-mode: vertical-rl;
	letter-spacing: 0.4em;
	margin: 0;
	align-self: start;
}
.about-story__body p {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--ink);
	line-height: 1.8;
	margin: 0 0 var(--wp--preset--spacing--md);
	max-width: 38em;
}
@media (min-width: 1025px) {
	.about-story__inner { grid-template-columns: auto 1fr; gap: var(--wp--preset--spacing--xl); }
}

/* Team (横並び + 段違い) */
.about-team { background: var(--wp--preset--color--base-2); padding-block: var(--wp--preset--spacing--xxl); }
.about-team__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
}
.about-team__list {
	list-style: none;
	margin: var(--wp--preset--spacing--lg) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--md);
}
.about-team__card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--md);
	transition: transform .2s ease, border-color .2s ease;
}
.about-team__card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--brand);
}
.about-team__role {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--brand);
	letter-spacing: 0.12em;
	margin: 0 0 var(--wp--preset--spacing--sm);
}
.about-team__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 var(--wp--preset--spacing--sm);
	letter-spacing: -0.01em;
}
.about-team__note {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
	line-height: 1.6;
}
@media (min-width: 768px) {
	.about-team__list { grid-template-columns: repeat(2, 1fr); }
	.about-team__card--1 { transform: translateY(2rem); }
	.about-team__card--3 { transform: translateY(2rem); }
}
@media (min-width: 1025px) {
	.about-team__list { grid-template-columns: repeat(4, 1fr); }
	.about-team__card--0 { transform: translateY(0); }
	.about-team__card--1 { transform: translateY(2rem); }
	.about-team__card--2 { transform: translateY(-1rem); }
	.about-team__card--3 { transform: translateY(2rem); }
}

/* Numbers (Mega) */
.about-numbers { background: var(--wp--preset--color--base); padding-block: var(--wp--preset--spacing--xxl); }
.about-numbers__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
}
.about-numbers__list {
	list-style: none;
	margin: var(--wp--preset--spacing--lg) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--lg);
}
.about-numbers__item {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--md);
}
.about-numbers__big {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(4rem, 12vw, 8rem);
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: var(--wp--preset--color--brand);
	margin: 0;
}
.about-numbers__unit {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-soft);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: var(--wp--preset--spacing--xs) 0 0;
}
@media (min-width: 768px) {
	.about-numbers__list { grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--md); }
}

/* Facts (Company info sheet) */
.about-facts {
	background: var(--wp--preset--color--base-2);
	padding-block: var(--wp--preset--spacing--xxl);
}
.about-facts__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
}
.about-facts__list {
	margin: var(--wp--preset--spacing--lg) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.about-facts__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--xs);
	padding-block: var(--wp--preset--spacing--md);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.about-facts__key {
	color: var(--wp--preset--color--brand) !important;
	margin: 0 !important;
}
.about-facts__val {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--contrast);
	margin: 0;
	line-height: 1.6;
}
.about-facts__val a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.about-facts__val a:hover { color: var(--wp--preset--color--brand); }
.about-facts__val--mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.02em;
	word-break: break-all;
}
@media (min-width: 768px) {
	.about-facts__row {
		grid-template-columns: 12rem 1fr;
		gap: var(--wp--preset--spacing--lg);
		align-items: baseline;
	}
}