:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  color: #23372e;
  background: #f6f3e9;
  line-height: 1.55;
}
* { box-sizing: border-box; }
body { margin: 0; }
.wrap { width: min(100% - 2rem, 66rem); margin-inline: auto; }
.hero {
  padding: clamp(2rem, 7vw, 5.25rem) 0 clamp(2.25rem, 7vw, 4.75rem);
  background: linear-gradient(90deg, #f6f3e9 6%, #f6f3e9eb 44%, #f6f3e991 100%),
    url("assets/background.jpg") center / cover no-repeat;
  border-bottom: 1px solid #d9ded0;
}
.brand-icon { display: block; border-radius: 1.15rem; margin-bottom: 1rem; }
h1, h2, h3 { line-height: 1.15; }
h1 {
  font: 700 clamp(2.35rem, 7vw, 4.8rem)/1.05 Georgia, serif;
  letter-spacing: -.045em;
  margin: 0;
}
.hero p { margin: .85rem 0 0; color: #344b3e; }
main { padding-block: 2rem; }
h2 { font-size: 1.2rem; margin: 0 0 .9rem; }
.route {
  background: #fffdf7;
  padding: clamp(1rem, 3vw, 1.55rem);
  border: 1px solid #d9ded0;
  border-left: .25rem solid #af643d;
  border-radius: .75rem;
  margin-bottom: .85rem;
}
.route-meta {
  color: #52634e;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.route h3 { font-size: 1.4rem; margin: .35rem 0 .55rem; }
.route p { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .5rem .95rem;
  border: 1px solid #55735d;
  border-radius: .45rem;
  color: #244a37;
  font-weight: 650;
  text-decoration: none;
}
.button:hover { background: #e9efe5; }
.primary { background: #2a513b; color: #fffdf7; }
.primary:hover { background: #1d392a; }
a:focus-visible { outline: 3px solid #a04d28; outline-offset: 4px; }
footer { color: #536255; font-size: .78rem; padding-bottom: 1.5rem; }
footer a { color: inherit; }
@media (max-width: 420px) {
  .actions > a { flex: 1 1 auto; }
}