:root { --moss: #1c2b22; --card: #e7f0df; --ink: #1a241c; --mark: #c6a15a; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--moss); color: var(--card); font-family: "Gill Sans", "Trebuchet MS", sans-serif; }
header { padding: 22px 7vw 8px; display: flex; justify-content: space-between; gap: 16px; align-items: end; }
header h1 { margin: 0; font-size: 28px; font-weight: 600; }
header nav a { color: var(--mark); margin-left: 14px; text-decoration: none; }
header nav a.on { color: white; }
.trail { width: min(920px, calc(100% - 24px)); margin: 10px auto 48px; }
.stop { background: var(--card); color: var(--ink); padding: 16px 16px 8px; margin: 18px 0; width: min(460px, 100%); position: relative; }
.stop:nth-child(even) { margin-left: auto; }
.stop em { display: block; color: #6d5a32; font-style: normal; font-size: 13px; letter-spacing: 0.12em; }
h2 { margin: 4px 0 8px; font-size: 22px; }
p { font-size: 17px; line-height: 1.45; }
img { width: 100%; height: auto; display: block; }
figure { margin: 0 0 12px; }
figcaption { font-size: 13px; color: #3e4a3e; margin-top: 6px; }
.note { padding: 0 7vw 40px; font-size: 14px; color: #c5d4c0; }
@media (max-width: 700px) {
  header { flex-direction: column; align-items: start; }
  header nav a { margin-left: 0; margin-right: 12px; }
  .stop, .stop:nth-child(even) { margin-left: 0; width: auto; }
}