.guides-index { background: var(--paper); }
.guides-index-hero { padding: 160px 0 104px; text-align: center; background: radial-gradient(circle at 20% 15%, rgba(142, 36, 170, .08), transparent 27%), radial-gradient(circle at 80% 65%, rgba(255, 167, 38, .17), transparent 29%), linear-gradient(145deg, #fffdf9, #f5e7d8); }
.guides-index-hero h1 { max-width: 940px; margin: 0 auto 30px; font-size: clamp(3.9rem, 7.5vw, 7.3rem); letter-spacing: -.065em; line-height: .93; }
.guides-index-hero h1 em { color: var(--sun-deep); font-weight: 400; }
.guides-index-hero > .container > p:not(.eyebrow) { max-width: 700px; margin: 0 auto; color: var(--earth-soft); font-family: var(--serif); font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.65; }
.guides-index-principles { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.guides-index-principles span { border: 1px solid var(--line); border-radius: 30px; padding: 8px 13px; color: var(--earth-soft); background: rgba(255,255,255,.62); font-size: .66rem; font-weight: 800; }

.guides-index-library { padding: 120px 0; }
.guide-edition { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(390px, .97fr); align-items: center; gap: clamp(55px, 8vw, 120px); }
.guide-edition + .guide-edition { margin-top: 150px; padding-top: 150px; border-top: 1px solid var(--line); }
.guide-edition figure { position: relative; margin: 0; }
.guide-edition figure::before { content: ""; position: absolute; inset: -17px 23px 19px -17px; border: 1px solid rgba(93, 64, 55, .18); border-radius: 10px; transform: rotate(-1deg); }
.guide-edition.transition figure::before { inset: 19px -17px -17px 23px; transform: rotate(1deg); }
.guide-edition figure img { position: relative; display: block; width: 100%; aspect-ratio: 1.28; border-radius: 8px; object-fit: cover; box-shadow: 0 26px 70px rgba(72, 45, 34, .16); }
.guide-edition figcaption { position: absolute; right: -18px; bottom: 24px; display: flex; align-items: center; gap: 13px; min-width: 176px; border-radius: 5px; padding: 17px 20px; color: white; background: var(--earth); box-shadow: 0 15px 35px rgba(60, 36, 28, .25); }
.guide-edition.transition figcaption { right: auto; left: -18px; background: var(--sun-deep); }
.guide-edition figcaption span { font-family: var(--serif); font-size: 1.7rem; }
.guide-edition figcaption small { font-size: .54rem; font-weight: 900; letter-spacing: .1em; line-height: 1.45; }
.guide-edition-copy h2 { margin-bottom: 25px; font-size: clamp(3rem, 5vw, 5.2rem); letter-spacing: -.055em; }
.guide-edition-copy .guide-lead { color: var(--earth-soft); font-family: var(--serif); font-size: 1.08rem; line-height: 1.72; }
.guide-edition-copy ul { margin: 28px 0 34px; padding: 0; list-style: none; }
.guide-edition-copy li { position: relative; padding: 13px 0 13px 28px; border-bottom: 1px solid var(--line); color: var(--earth-soft); font-size: .76rem; }
.guide-edition-copy li::before { content: "↗"; position: absolute; left: 0; color: var(--sun-deep); }

.guides-index-method { padding: 120px 0; color: white; background: #30221e; }
.guides-index-method > .container { display: grid; grid-template-columns: minmax(270px, .67fr) minmax(0, 1.33fr); gap: clamp(65px, 10vw, 145px); }
.guides-index-method h2 { color: white; font-size: clamp(3.3rem, 5.6vw, 5.7rem); }
.guides-method-list article { display: grid; grid-template-columns: 53px 1fr; gap: 25px; padding: 36px 0; border-top: 1px solid rgba(255,255,255,.15); }
.guides-method-list article:last-child { border-bottom: 1px solid rgba(255,255,255,.15); }
.guides-method-list article > span { display: grid; width: 49px; height: 49px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: var(--sun); font-family: var(--serif); }
.guides-method-list h3 { margin: 3px 0 13px; color: white; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.guides-method-list p { margin: 0; color: rgba(255,255,255,.61); font-size: .78rem; line-height: 1.78; }

.guides-index-cta { padding: 115px 0; text-align: center; background: var(--white); }
.guides-index-cta h2 { max-width: 760px; margin: 0 auto 22px; font-size: clamp(3rem, 5vw, 5rem); }
.guides-index-cta > .container > p:not(.eyebrow) { max-width: 620px; margin: 0 auto 30px; color: var(--earth-soft); font-family: var(--serif); font-size: 1.05rem; }

@media (max-width: 900px) {
  .guide-edition, .guides-index-method > .container { grid-template-columns: 1fr; }
  .guide-edition.transition .guide-edition-copy { order: 2; }
  .guide-edition.transition figure { order: 1; }
  .guide-edition figure { width: min(700px, 95%); margin-inline: auto; }
}

@media (max-width: 650px) {
  .guides-index-hero { padding: 126px 0 76px; }
  .guides-index-hero h1 { font-size: clamp(3.25rem, 15vw, 4.7rem); }
  .guides-index-library, .guides-index-method, .guides-index-cta { padding: 78px 0; }
  .guide-edition + .guide-edition { margin-top: 82px; padding-top: 82px; }
  .guide-edition { gap: 49px; }
  .guide-edition figcaption { right: -8px; }
  .guide-edition.transition figcaption { left: -8px; }
  .guides-method-list article { grid-template-columns: 1fr; }
}