:root {
  --bg: #eef1f3;
  --ink: #20292e;
  --slate: #2b3942;
  --teal: #2f6f74;
  --wine: #7b2d3a;
  --edge: #cdd6db;
  --dim: #5d6b72;
  --panel: #f8fafb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Palatino, "Palatino Linotype", "Book Antiqua", "URW Palladio L", serif;
  line-height: 1.64;
}

a { color: var(--teal); }
a:hover { color: var(--wine); }

.masthead {
  background: var(--slate);
  color: #e8eef0;
  padding: 20px 24px;
}
.masthead .site-id { max-width: 940px; margin: 0 auto; }
.masthead h1 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: .4px; }
.masthead p { margin: 4px 0 0; font-size: .92rem; color: #aebdc3; font-style: italic; }
.masthead a { color: inherit; text-decoration: none; }

.shell {
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  gap: 32px;
  padding: 26px 24px 10px;
  align-items: flex-start;
}

.rail {
  flex: 0 0 196px;
  position: sticky;
  top: 18px;
}
.rail nav { border-top: 3px solid var(--wine); }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list li { border-bottom: 1px solid var(--edge); }
.nav-list a { display: block; padding: 9px 4px; text-decoration: none; color: var(--slate); font-size: .96rem; }
.nav-list a:hover { color: var(--wine); padding-left: 8px; }
.rail .aside { margin-top: 22px; font-size: .84rem; color: var(--dim); line-height: 1.5; }

.main-col { flex: 1 1 auto; min-width: 0; }

h2 { font-size: 1.3rem; font-weight: 600; margin: 0 0 14px; color: var(--slate); }
h2.section { border-bottom: 1px solid var(--edge); padding-bottom: 6px; margin-top: 28px; }

.intro { font-size: 1.05rem; color: #39474e; }

.route { padding: 16px 0; border-bottom: 1px solid var(--edge); }
.route:last-child { border-bottom: none; }
.route h3 { margin: 0 0 2px; font-size: 1.12rem; font-weight: 600; }
.route h3 a { text-decoration: none; }
.route h3 a:hover { text-decoration: underline; }
.route-when { font-size: .8rem; color: var(--dim); letter-spacing: .5px; text-transform: uppercase; margin: 0 0 8px; }
.route p { margin: 0; }

.photo-note {
  background: var(--panel);
  border: 1px solid var(--edge);
  padding: 12px 15px;
  margin: 16px 0;
  font-size: .9rem;
  color: var(--dim);
}
.photo-note strong { color: var(--slate); font-weight: 600; }

.gone { padding: 50px 0; }
.gone .code { font-size: 2.6rem; color: var(--wine); margin: 0 0 6px; font-weight: 600; }

.colophon {
  border-top: 3px solid var(--wine);
  background: var(--slate);
  color: #aebdc3;
  margin-top: 30px;
}
.colophon div { max-width: 940px; margin: 0 auto; padding: 18px 24px; font-size: .85rem; }
.colophon a { color: #cdd9dd; }

@media (max-width: 680px) {
  .shell { flex-direction: column; gap: 18px; }
  .rail { position: static; flex-basis: auto; width: 100%; }
  .nav-list { display: flex; flex-wrap: wrap; gap: 0 4px; }
  .nav-list li { border-bottom: none; border-right: 1px solid var(--edge); }
  .nav-list li:last-child { border-right: none; }
  .rail .aside { display: none; }
}