/**
 * OSHIDA — about / why-oshida.
 *
 * @figma 2014:2650  Rectangle 1485 — 1167.24 x 431.11 at (136.38, 3717.20)
 * @figma 2014:2652  heading lockup 338 x 83 at (906.62, 3750.40)
 * @figma 2014:2654  the arch glyph, 53.79 x 51.08, inline in the heading
 * @figma 2014:2651  body 1046.85 x 230 at (197.77, 3864.90), 46px leading
 *
 * NOTCH GEOMETRY — this node's own, not the home panel's. Traced off
 * tools/figma/renders/about-1440.webp: the block-start edge steps down 83px
 * (3717 -> 3800, the token's 83.14px), and the diagonal runs from x=815 up to
 * x=890 inside a panel spanning 136.38–1303.62. That is 58.1% / 64.6%, where
 * 1621:1265 measures 29.81% / 38.7%. Re-declaring the two percentages locally
 * is enough, because var() substitution happens where --o-notch-clip is USED.
 *
 * THE OUTLINE. clip-path clips a border away with everything else outside the
 * polygon, and this panel's fill (--o-veil-notch) is within a point or two of
 * the page ground — with no edge it would be invisible. So the hairline is the
 * element itself, clipped, and the fill is a ::before inset 1px and clipped to
 * the same polygon. Two boxes, one outline that follows the diagonal.
 *
 * Owner: work package C2.
 */

.o-about-why-oshida {
	padding-block-start: var(--o-about-gap-sm); /* 3717.20 - 3635.88 = 81.3 */
}

.o-about-why-oshida__panel {
	--o-notch-inset: 58.1%;
	--o-notch-shelf: 64.6%;

	position: relative;
	padding-block: clamp(20px, 2.3vw, 33px) clamp(32px, 3.7vw, 53px);
	padding-inline: clamp(20px, 4.1vw, 59px) clamp(20px, 4.2vw, 61px);
	border-radius: var(--o-radius-xl);
	background-color: var(--o-line-soft);
	clip-path: var(--o-notch-clip);
}

.o-about-why-oshida__panel::before {
	content: "";
	position: absolute;
	inset: var(--o-line-width);
	border-radius: var(--o-radius-xl);
	background-color: var(--o-veil-notch);
	clip-path: var(--o-notch-clip);
}

.o-about-why-oshida__title,
.o-about-why-oshida__lede,
.o-about-why-oshida__body {
	position: relative;
	margin: 0;
}

.o-about-why-oshida__title {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 83px;
	font-size: var(--o-about-fs-display);
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-tight);
	letter-spacing: var(--o-track-snug);
}

.o-about-why-oshida__glyph {
	display: inline-flex;
	flex: none;
	inline-size: clamp(32px, 3.75vw, 54px);
}

.o-about-why-oshida__glyph-art {
	inline-size: 100%;
	block-size: auto;
}

.o-about-why-oshida__lede {
	margin-block-start: clamp(16px, 2.2vw, 31px); /* 3864.90 - 3833.40 */
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-black);
	line-height: 46px; /* @figma 2014:2651 — 230 / 5 lines */
	letter-spacing: var(--o-track-tight);
}

.o-about-why-oshida__body {
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-extralight);
	line-height: 46px;
	letter-spacing: var(--o-track-tight);
}

@media (max-width: 899px) {
	/*
	 * The notch is a 1440px composition: below `lg` the shelf would eat the
	 * heading. Square the block-start edge off and keep the radius.
	 */
	.o-about-why-oshida__panel,
	.o-about-why-oshida__panel::before {
		clip-path: none;
	}

	.o-about-why-oshida__panel {
		border-radius: var(--o-radius-lg);
	}

	.o-about-why-oshida__panel::before {
		border-radius: var(--o-radius-lg);
	}

	.o-about-why-oshida__lede,
	.o-about-why-oshida__body {
		line-height: var(--o-lh-body);
	}
}

@media (max-width: 599px) {
	.o-about-why-oshida__title {
		flex-wrap: wrap;
		min-block-size: 0;
	}
}