.p-archive__header {
	margin-bottom: 64px;
}

.p-archive__title {
	font-size: var(--fs-xl);
}

.p-archive__list {
	border-top: 1px solid var(--c-line);
}

.p-archive__item {
	display: flex;
	gap: 32px;
	padding-block: 24px;
	border-bottom: 1px solid var(--c-line);
	transition: color var(--dur-s) var(--ease-out);
}

.p-archive__item time {
	flex-shrink: 0;
	font-family: var(--f-en);
	letter-spacing: var(--tracking-en);
	color: var(--c-muted);
}

.p-archive__item:hover {
	color: var(--c-shiba-deep);
}

.p-archive__content {
	max-width: 760px;
}

.p-archive__content > * + * {
	margin-top: 1.5em;
}

/* Hero */

.p-hero {
	--stage-w: min(46vw, 760px);
	--stage-h: calc(var(--stage-w) * 0.625);
	--ears: polygon(2% 100%, 12% 0%, 12% 0%, 12% 100%, 12% 100%, 12% 0%, 12% 0%, 47% 100%, 53% 100%, 88% 0%, 88% 0%, 88% 100%, 88% 100%, 88% 0%, 88% 0%, 98% 100%);
	--rect: polygon(0% 100%, 0% 0%, 25.5% 0%, 25.5% 100%, 25% 100%, 25% 0%, 50.5% 0%, 50.5% 100%, 50% 100%, 50% 0%, 75.5% 0%, 75.5% 100%, 75% 100%, 75% 0%, 100% 0%, 100% 100%);
	position: relative;
	display: flex;
	align-items: center;
	min-height: max(680px, min(100svh, 1000px));
	overflow: hidden;
}

.p-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-ink);
	clip-path: polygon(52% 0, 100% 0, 100% 100%, 38% 100%);
}

.p-hero__body {
	position: relative;
	z-index: 2;
	max-width: min(42vw, 660px);
	padding: calc(var(--header-h) + 32px) 0 96px clamp(var(--gutter), 6vw, 120px);
}

.p-hero__label {
	font-family: var(--f-en);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--c-shiba-deep);
}

.p-hero__title {
	margin-top: 20px;
	font-size: clamp(2rem, 0.2rem + 3.2vw, 3.5rem);
	line-height: 1.45;
	letter-spacing: 0.06em;
}

.p-hero__title span {
	display: inline-block;
}

.p-hero__lead {
	max-width: 34em;
	margin-top: 28px;
}

.p-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 44px;
}

.p-hero__visual {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.p-hero__stage {
	position: absolute;
	top: 50%;
	right: max(var(--gutter), 5vw);
	width: var(--stage-w);
	aspect-ratio: 16 / 10;
	transform: translateY(-46%);
}

.p-hero__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: var(--c-white);
	stroke-width: 1.5;
	opacity: 0;
}

.p-hero__frame path {
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.p-hero__wire {
	position: absolute;
	inset: 0;
}

.p-hero__wire i {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: var(--w);
	height: var(--h);
	background: color-mix(in srgb, var(--c-white) 16%, transparent);
	opacity: 0;
	transition: background-color 0.4s var(--ease-out);
}

.p-hero__wire.is-colored i {
	background: color-mix(in srgb, var(--c-white) 34%, transparent);
}

.p-hero__wire.is-colored .is-strong {
	background: var(--c-white);
}

.p-hero__wire.is-colored .is-accent {
	background: var(--c-shiba);
}

.p-hero__wire.is-colored .is-image {
	background: color-mix(in srgb, var(--c-shiba) 55%, var(--c-ink));
}

.p-hero__mask {
	position: absolute;
	inset: 0;
	clip-path: var(--ears);
}

.p-hero__slide {
	position: absolute;
	inset: 0;
	background: var(--c-ink);
}

.p-hero__slide:not(:first-child) {
	visibility: hidden;
	opacity: 0;
}

.p-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.is-hero-js .p-hero__mask {
	clip-path: var(--rect);
}

.is-hero-intro .p-hero__slide:first-child {
	visibility: hidden;
	opacity: 0;
}

.is-hero-intro .p-hero__frame {
	opacity: 1;
}

.is-hero-intro .p-hero__frame path {
	stroke-dashoffset: 1;
}

.p-hero__caption {
	position: absolute;
	top: calc(50% + var(--stage-h) * 0.54 + 24px);
	right: calc(max(var(--gutter), 5vw) + var(--stage-w));
	display: flex;
	align-items: baseline;
	gap: 20px;
	color: var(--c-white);
	transform: translateX(100%);
	pointer-events: auto;
}

.p-hero__count {
	font-family: var(--f-en);
	font-size: var(--fs-sm);
	letter-spacing: var(--tracking-en);
	color: var(--c-shiba);
}

.p-hero__work {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.p-hero__name {
	font-weight: 700;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size var(--dur-s) var(--ease-out);
}

.p-hero__work:hover .p-hero__name {
	background-size: 100% 1px;
}

.p-hero__industry {
	font-size: var(--fs-xs);
	color: color-mix(in srgb, var(--c-white) 64%, transparent);
}

.p-hero__shiba {
	position: absolute;
	right: var(--gutter);
	bottom: 28px;
	width: clamp(72px, 7vw, 112px);
	color: var(--c-shiba);
}

.p-hero__scroll {
	position: absolute;
	bottom: 0;
	left: clamp(var(--gutter), 2.5vw, 48px);
	z-index: 2;
	padding-bottom: 88px;
	font-family: var(--f-en);
	font-size: var(--fs-xs);
	letter-spacing: 0.24em;
	writing-mode: vertical-rl;
}

.p-hero__scroll::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 72px;
	background: var(--c-ink);
	transform-origin: top;
	animation: hero-scroll 2.4s var(--ease-in-out) infinite;
}

@keyframes hero-scroll {
	0% {
		transform: scaleY(0);
		transform-origin: top;
	}

	50% {
		transform: scaleY(1);
		transform-origin: top;
	}

	51% {
		transform-origin: bottom;
	}

	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

.has-dark-hero .l-header:not(.is-scrolled) .l-header__cta::before {
	background: var(--c-white);
}

.has-dark-hero .l-header:not(.is-scrolled) .l-header__cta:hover,
.has-dark-hero .l-header:not(.is-scrolled) .l-header__cta:focus-visible {
	color: var(--c-ink);
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.has-dark-hero .l-header {
		background: var(--c-white);
		box-shadow: 0 1px 0 var(--c-line);
	}

	.has-dark-hero .l-header:not(.is-scrolled) .l-nav {
		color: var(--c-ink);
	}

	.has-dark-hero .l-header:not(.is-scrolled) .l-header__cta::before {
		background: var(--c-ink);
	}

	.has-dark-hero .l-header:not(.is-scrolled) .l-header__cta:hover {
		color: var(--c-white);
	}
}

@media (max-width: 1023px) {
	.p-hero {
		--stage-w: 100%;
		display: block;
		min-height: 0;
	}

	.p-hero::before,
	.p-hero__scroll {
		display: none;
	}

	.p-hero__body {
		max-width: none;
		padding: calc(var(--header-h) + 40px) var(--gutter) 64px;
	}

	.p-hero__visual {
		position: relative;
		padding: 88px var(--gutter) 120px;
		background: var(--c-ink);
		clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%);
		pointer-events: auto;
	}

	.p-hero__stage {
		position: relative;
		top: auto;
		right: auto;
		transform: none;
	}

	.p-hero__caption {
		position: static;
		margin-top: 24px;
		transform: none;
	}

	.p-hero__shiba {
		bottom: 24px;
		width: 72px;
	}
}

@media (max-width: 767px) {
	.p-hero__lead br {
		display: none;
	}

	.p-hero__actions .c-button {
		flex: 1 1 100%;
	}

	.p-hero__caption {
		flex-wrap: wrap;
		gap: 4px 16px;
	}
}