/* ABOUT — a quiet company record on the site's common grid.
		   Existing header, footer, type ramp, hairlines and spacing tokens only.
		   No new design language, no ABOUT-only system, no display typography. */

		/* the shared editorial grid origin — same value as the home page's
		   home-editorial.css, so ABOUT's text column starts on the very same
		   line as the TOP page's main text blocks. */
		:root { --silence: 21%; }
		@media (max-width: 62rem) { :root { --silence: clamp(1.75rem, 9vw, 3.5rem); } }

		.about-page .page-section { padding-block: clamp(3.5rem, 6vw, 5.5rem); }

		/* INTRO — just the word "ABOUT". Not a standalone hero: it sits close
		   under the breadcrumb and leads straight into section 01. */
		.page-hero.about-hero {
			min-height: 0;
			padding-block: var(--space-8) var(--space-4);
		}
		.about-hero { display: block; }
		.page-hero h1.about-hero__label {
			margin: var(--space-6) 0 0 var(--silence);
			max-width: none;
			font-size: clamp(1.05rem, 1.5vw, 1.35rem);
			font-weight: 400;
			letter-spacing: 0.14em;
			line-height: 1.2;
			color: var(--color-ink);
		}

		/* section 01: short lead-in from "ABOUT" */
		#about-us { padding-top: clamp(1.75rem, 3vw, 2.5rem); }

		/* section headers reproduce the TOP page's arrangement exactly: the
		   number/label sits in the left gutter, the Japanese heading on the
		   shared text grid (the same line as the body). */
		.about-page .section-header {
			display: grid;
			grid-template-columns: var(--silence) minmax(0, 1fr);
			column-gap: 0;
			align-items: start;
		}
		.about-page .section-header > .section-index {
			grid-column: 1;
			flex-direction: column;
			gap: 0.4rem;
			color: var(--color-muted);
		}
		.about-page .section-header > .section-index span:first-child { color: var(--color-ink); }
		.about-page .section-header > h2 {
			grid-column: 2;
			margin: 0;
			font-size: clamp(1.6rem, 2.3vw, 2.05rem);
			line-height: 1.3;
		}

		/* COMPANY: its label and table both sit on the shared text grid. */
		#about-company .section-header {
			display: block;
			margin-left: var(--silence);
		}
		#about-company .section-header > .section-index { flex-direction: row; gap: var(--space-3); }

		@media (max-width: 62rem) {
			.about-page .section-header { grid-template-columns: 1fr; }
			.about-page .section-header > .section-index { flex-direction: row; gap: var(--space-4); }
			.about-page .section-header > h2 {
				grid-column: 1;
				margin-left: var(--silence);
				margin-top: var(--space-4);
			}
		}

		/* body — one column on the shared text grid, a readable Japanese measure. */
		.about-copy {
			margin-left: var(--silence);
			margin-top: clamp(1.5rem, 3vw, 2.25rem);
			max-width: 36rem;
			text-wrap: pretty;
		}
		.about-copy p { margin: 0; line-height: 1.9; }
		.about-copy p + p { margin-top: var(--space-6); }

		/* the five lines allowed one step up — the site's heading / quote
		   scale, never display size. */
		.about-copy .accent {
			color: var(--color-ink);
			font-size: clamp(1.15rem, 1.6vw, 1.45rem);
			font-weight: 440;
			letter-spacing: var(--tracking-heading);
			line-height: 1.55;
			margin: clamp(2rem, 4.5vw, 3rem) 0;
		}

		/* the opening line of a section reads one step up from body copy —
		   it introduces rather than argues, so it stays short of .accent. */
		.about-copy .lede {
			font-size: clamp(1.05rem, 1.3vw, 1.2rem);
			font-weight: 460;
			line-height: 1.85;
		}
		.about-copy .lede + p { margin-top: clamp(1.75rem, 3vw, 2.25rem); }

		/* a paragraph that turns the argument: more room arriving than
		   leaving, so it reads as a threshold crossed, not a symmetrical
		   pause. */
		.about-copy .turn { margin-top: clamp(2.75rem, 5.5vw, 4rem); }
		.about-copy .turn + p { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
		.about-copy .accent.turn { margin-bottom: 0; }

		/* the one major turn on the page — the 鷽替え story giving way to
		   the next idea — takes the widest approach, then settles back
		   quickly. */
		.about-copy .turn-major { margin-top: clamp(3.5rem, 7vw, 5rem); }
		.about-copy .turn-major + p { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
		.about-copy .accent.turn-major { margin-bottom: 0; }

		/* a beat in the copy: the line's own measure narrows inside the same
		   column, so it breaks into its own short block instead of running
		   the full reading width — no change to type size. */
		.about-copy .beat { max-width: 20rem; }

		/* the strongest beat in each section: a shorter measure again, so
		   the line reads as that section's one clear pause — a node in the
		   page, not a bigger headline. */
		.about-copy .beat-strong { max-width: 14rem; }

		/* COMPANY — a plain record block on the same grid line. */
		.about-company {
			margin-left: var(--silence);
			margin-top: clamp(1.25rem, 2.5vw, 2rem);
			max-width: 34rem;
		}

		@media (max-width: 45rem) {
			.about-copy,
			.about-company { max-width: none; }
			.meta-list.about-company div {
				grid-template-columns: 1fr;
				gap: var(--space-1);
			}
			.meta-list.about-company dd { font-size: var(--text-small); }
		}