/* Home scene 06.1 and 06.3: how a template and a phone theme are made. A lead beside five steps on a rail (paper sheet). */

.craft {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(30px, 5vw, 90px);
	align-items: start;
	margin-block-start: clamp(70px, 9vw, 140px);
	padding-block-start: clamp(40px, 6vw, 90px);
	border-block-start: var(--hairline) solid var(--ln-s);
}

.craft-l {
	position: sticky;
	inset-block-start: calc(var(--hdr-h, 72px) + var(--sp-32));
	display: grid;
	gap: 22px;
	justify-items: start;
}

.craft-l .d2 {
	font-size: clamp(34px, 4.4vw, 70px);
}

.craft-l .lead {
	color: var(--gray-600);
}

.craft-l .go {
	color: var(--ink-900);
}

.craft-steps {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* the rail: a hairline down the number column */
.craft-steps::before {
	content: "";
	position: absolute;
	inset-block: 28px;
	inset-inline-start: 27px;
	border-inline-start: var(--hairline) solid var(--ink-900);
	opacity: 0.25;
}

.craft-steps li {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: var(--sp-16);
	padding-block: var(--sp-24);
	border-block-end: var(--hairline) solid var(--ln-s);
}

.craft-steps li:last-child {
	border-block-end: 0;
}

.craft-steps .n {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: 56px;
	block-size: 56px;
	background: var(--gray-50);
	border: var(--hairline) solid var(--ink-900);
	color: var(--gold-700);
	font-size: 15px;
	font-weight: 500;
	transition:
		background var(--d-base) var(--ease),
		color var(--d-base) var(--ease);
}

.craft-steps li:hover .n {
	background: var(--ink-900);
	color: var(--gold-300);
}

.craft-steps h4 {
	margin: 0 0 var(--sp-8);
	font-size: var(--fs-h4);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.craft-steps p {
	margin: 0;
	max-inline-size: 52ch;
	color: var(--gray-600);
}

@media (max-width: 999px) {
	.craft {
		grid-template-columns: 1fr;
	}

	.craft-l {
		position: static;
	}
}

.rm .craft-steps .n {
	transition: none;
}