@charset "UTF-8";

.guide-page { --olive: #48583e; }

.guide-page main { max-width: 1320px; padding: 0 48px; margin: auto; }
.guide-page header { height: auto; min-height: 108px; flex-wrap: wrap; padding-block: 24px; }
.guide-page header nav { flex-wrap: wrap; gap: 24px; }
.guide-page header a[aria-current] { color: var(--accent); }
.guide-masthead { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 64px 0 54px; border-bottom: 1px solid var(--line); }
.guide-masthead h1 { font: 500 clamp(62px, 8vw, 100px)/1.1 Georgia, serif; letter-spacing: -.05em; color: var(--olive); margin: 18px 0 0; }
.guide-masthead h1 span { color: var(--accent); }
.guide-intro h2 { font: 500 32px/1.6 Georgia, "Yu Mincho", serif; margin: 0 0 20px; color: var(--olive); }
.guide-intro p { margin: 0; color: var(--muted); line-height: 2; font-size: 15px; }
.guide-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.guide-index a { display: flex; gap: 16px; align-items: baseline; font-size: 14px; }
.guide-number { color: var(--accent); font: italic 22px Georgia, serif; }
.guide-chapter { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 90px; padding: 70px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 30px; }
.guide-heading h2 { font: 500 34px/1.55 Georgia, "Yu Mincho", serif; color: var(--olive); margin: 20px 0; overflow-wrap: anywhere; }
.guide-heading p { color: var(--muted); font-size: 14px; line-height: 2; }
.guide-app { display: inline-block; margin-top: 12px; padding: 8px 0; border-bottom: 1px solid var(--accent); font-weight: 600; }
.guide-app span { color: var(--accent); margin-left: 14px; }
.guide-content h3 { font-size: 16px; color: var(--olive); margin: 0 0 12px; }
.guide-content p { color: var(--muted); font-size: 14px; line-height: 2; margin: 0 0 25px; }
.guide-content ol { list-style: none; padding: 0; margin: 0; counter-reset: steps; }
.guide-content li { counter-increment: steps; display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.guide-content li::before { content: counter(steps, decimal-leading-zero); font: 18px/1.7 Georgia, serif; color: var(--accent); }
.guide-content li strong { display: block; font-size: 15px; margin-bottom: 6px; }
.guide-content li p { margin: 0; }
.guide-note { background: #e9ecdf; padding: 22px 26px; margin-top: 28px; border-left: 2px solid var(--olive); }
.guide-note p { margin: 0; }
.guide-next { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 56px 0 70px; }
.guide-next h2 { font: 500 30px/1.5 Georgia, "Yu Mincho", serif; color: var(--olive); margin: 0; }
.guide-next p { color: var(--muted); font-size: 14px; line-height: 2; }
.guide-next a { text-decoration: underline; text-underline-offset: 5px; }
.guide-page .home-footer { margin-top: 0; }
.guide-page h2, .guide-page h3, .guide-page a { overflow-wrap: anywhere; }
@media (max-width: 850px) {
	.guide-page main { padding-inline: 28px; }
	.guide-page header { padding-inline: 28px; gap: 20px; }
	.guide-masthead, .guide-chapter, .guide-next { gap: 36px; }
	.guide-index { gap: 18px; }
}
@media (max-width: 600px) {
	.guide-page main, .guide-page header { padding-inline: 22px; }
	.guide-page header nav { display: flex; order: 3; width: 100%; margin: 0; justify-content: space-between; gap: 12px; font-size: 13px; }
	.guide-page .langs { margin-left: auto; }
	.guide-masthead, .guide-chapter, .guide-next { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.guide-masthead { padding-block: 38px; }
	.guide-intro h2 { font-size: 26px; }
	.guide-index { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.guide-chapter { padding-block: 42px; }
	.guide-heading h2 { font-size: 29px; }
	.guide-next { padding-block: 38px; }
}