@import url("../site/styles.css");

.guide-hero { max-width: 1000px; padding: 80px 0 65px; }
.guide-hero h1 { font-size: clamp(3rem, 6vw, 5.4rem); }
.guide-hero .lead { max-width: 730px; }
.guide-hero .boundary { max-width: 650px; }
.guide-hero + .section { border-top: 1px solid var(--line); }
.architecture-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; }
.architecture-grid .chapter h3 { font-size: 1.6rem; }
.tour { padding: 0; margin: 0; list-style: none; max-width: 930px; }
.tour li { display: grid; grid-template-columns: 70px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--line); }
.tour-index { font-family: var(--serif); font-size: 2rem; color: var(--accent); font-style: italic; }
.tour h3 { font-size: 1.65rem; }
.tour p { color: var(--muted); font-size: 0.93rem; }
.guide-links { padding-top: 0; }
@media (max-width: 780px) {
  .guide-hero { padding-top: 50px; }
  .architecture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}
@media (max-width: 500px) {
  .architecture-grid { grid-template-columns: 1fr; }
  .tour li { grid-template-columns: 42px 1fr; gap: 15px; }
  .tour h3 { font-size: 1.4rem; }
}