body {
  color: var(--ink);
}
.section-route-choice {
  background: #101614;
}
.hero + .section-route-choice {
  background: transparent;
}
.page-header + .section-route-choice {
  background: transparent;
}
.section h2,
.prose h2,
.prose h3 {
  color: #f2f5f1;
}
.route-card {
  border-color: #43534b;
}
.coastal-card {
  background: #172823;
}
.r10-card {
  background: #292720;
}
.route-card p:not(.route-number),
.prose p,
.prose li {
  color: #c4d0c8;
}
.route-stats {
  color: #c4d0c8;
}
.card-link {
  color: #d7e7dc;
}
.dark-band {
  border-block: 1px solid #705b21;
  background: #17140c;
}
.dark-band h2 {
  color: #f5efdc;
}
.dark-band .split-content p {
  color: #e3dcc5;
}
.safety-note p:not(.eyebrow) {
  color: #c4d0c8;
}
.download-link {
  color: #edf1ec;
  background: var(--surface);
}
.notice {
  background: #30251f;
  color: #f1dbcd;
}
.map-frame {
  background: #15211c;
}
audio {
  filter: invert(0.85) hue-rotate(155deg);
}

.page-header {
  position: relative;
  overflow: visible;
  background: rgba(3, 11, 16, 0.32);
}
.page-header .inner {
  position: relative;
  z-index: 1;
}
.reflection-modal {
  width: min(680px, calc(100% - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  border: 1px solid #52655c;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  height: min(760px, calc(100dvh - 32px));
}
.reflection-modal:not([open]) {
  display: none;
}
.reflection-modal::backdrop {
  background: rgba(0, 0, 0, 0.75);
}
.reflection-modal-content {
  flex: 1;
  min-height: 0;
  padding: 30px;
  overflow-y: auto;
}
.reflection-modal-toolbar {
  flex: 0 0 auto;
  min-height: 52px;
  margin: 0;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #52655c;
  background: rgba(24, 33, 30, 0.94);
}
.reflection-modal-guide {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #806923;
  padding: 0 12px;
  color: #f2d78c;
  background: rgba(23, 20, 12, 0.32);
  cursor: pointer;
  font:
    700 12px/1 Manrope,
    sans-serif;
}
.reflection-modal-guide:hover,
.reflection-modal-guide:focus-visible {
  color: #17140c;
  background: #f2d78c;
}
.reflection-modal-picker-button {
  width: 32px;
  justify-content: center;
  padding: 0;
}
.reflection-modal-accessibility {
  display: flex;
  gap: 6px;
}
.reflection-modal-accessibility > button {
  width: 32px;
  height: 32px;
  border: 1px solid #806923;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font:
    700 12px/1 Manrope,
    sans-serif;
}
.reflection-modal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.reflection-modal-close {
  width: 32px;
  height: 32px;
  border: 1px solid #52655c;
  padding: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-size: 23px;
  line-height: 1;
}
.reflection-modal h2 {
  margin: 0 0 16px;
  font-size: 31px;
}
.reflection-modal .reflection-audio-control {
  margin: 0;
}
.reflection-modal .modal-audio-control .audio-play-button {
  width: 32px;
  padding: 0;
  justify-content: center;
}
.reflection-modal .modal-audio-control .audio-control-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.reflection-modal p {
  color: #c4d0c8;
}
.reflection-modal .reflection-text li {
  color: #c4d0c8;
}
.reflection-modal audio {
  width: 100%;
  margin-top: 12px;
}
.route-guide-modal {
  width: min(880px, calc(100% - 32px));
}
.route-guide-modal-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #f2d78c;
  font:
    600 16px Fraunces,
    serif;
}
.route-guide-modal-content .route-station {
  padding: 22px 0;
  border-top-color: #52655c;
}
.route-guide-modal-content .route-station:first-child {
  padding-top: 0;
  border-top: 0;
}
.route-guide-modal-content .route-station h3 {
  color: var(--ink);
}
.route-guide-modal-content .route-station-directions {
  color: #c4d0c8;
}
.reflection-picker-modal {
  width: min(720px, calc(100% - 32px));
}
.reflection-picker-content {
  padding: 20px;
}
.reflection-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.reflection-picker-item {
  min-height: 58px;
  border: 1px solid #52655c;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(32px, auto) 1fr;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  text-align: left;
}
.reflection-picker-item:hover,
.reflection-picker-item:focus-visible {
  border-color: #f2d78c;
  background: rgba(242, 215, 140, 0.12);
}
.reflection-picker-label {
  color: #f2d78c;
  font:
    800 13px/1 Manrope,
    sans-serif;
}
.reflection-picker-title {
  color: #c4d0c8;
  font:
    600 13px/1.35 Manrope,
    sans-serif;
}

[data-theme='light'] {
  --ink: #18221f;
  --muted: #617069;
  --paper: #f4f1e8;
  --pine: #e4ebe5;
  --sea: #4f7f7c;
  --coral: #b7583f;
  --line: #cdd4cc;
  --night: #1c2d29;
  --surface: #fffdf7;
}
[data-theme='light'] .site-header {
  background: rgba(244, 241, 232, 0.94);
}
[data-theme='light'] .hero {
  color: #18221f;
  background: rgba(244, 241, 232, 0.62);
}
[data-theme='light'] .video-backdrop::after {
  background: rgba(244, 241, 232, 0.55);
}
[data-theme='light'] .hero h1 {
  color: #18221f;
}
[data-theme='light'] .hero .lead {
  color: #46564f;
}
[data-theme='light'] .hero-route {
  border-left-color: #b39642;
}
[data-theme='light'] .hero-route dl div {
  border-bottom-color: #c5cbc4;
}
[data-theme='light'] .route-kicker,
[data-theme='light'] .hero-route dt {
  color: #6b5720;
}
[data-theme='light'] .page-header {
  color: #18221f;
  background: rgba(244, 241, 232, 0.62);
}
[data-theme='light'] .page-header p:last-child {
  color: #46564f;
}
[data-theme='light'] .brand {
  color: var(--ink);
}
[data-theme='light'] .site-nav a {
  color: #30433c;
}
[data-theme='light'] .menu-button span {
  background: var(--ink);
}
[data-theme='light'] .section-route-choice {
  background: var(--paper);
}
[data-theme='light'] .hero + .section-route-choice {
  background: transparent;
}
[data-theme='light'] .route-card {
  border-color: var(--line);
}
[data-theme='light'] .coastal-card {
  background: #dcebe5;
}
[data-theme='light'] .r10-card {
  background: #efe5d8;
}
[data-theme='light'] .route-card p:not(.route-number),
[data-theme='light'] .prose p,
[data-theme='light'] .prose li,
[data-theme='light'] .route-stats {
  color: #41534c;
}
[data-theme='light'] .section h2,
[data-theme='light'] .prose h2,
[data-theme='light'] .prose h3,
[data-theme='light'] .card-link {
  color: var(--ink);
}
[data-theme='light'] .dark-band h2 {
  color: #18221f;
}
[data-theme='light'] .dark-band {
  color: #18221f;
  background: #dedfdb;
  border-block-color: #b39642;
}
[data-theme='light'] .dark-band .split-content p {
  color: #46564f;
}
[data-theme='light'] .dark-band .button-light {
  color: #18221f;
  border-color: #8b7026;
}
[data-theme='light'] .dark-band .button-light:hover {
  color: #f4f1e8;
  background: #18221f;
}
[data-theme='light'] .safety-note p:not(.eyebrow) {
  color: #46564f;
}
[data-theme='light'] .download-link {
  color: var(--ink);
  background: #fffdf7;
}
[data-theme='light'] .notice {
  background: #f4e4d8;
  color: #4f4037;
}
[data-theme='light'] .map-open-button {
  color: var(--ink);
  background: #e8eee9;
}
[data-theme='light'] audio {
  filter: none;
}
[data-theme='light'] .reflection-modal p {
  color: #41534c;
}
[data-theme='light'] .reflection-modal .reflection-text li {
  color: #41534c;
}
[data-theme='light'] .jump-nav {
  background: rgba(244, 241, 232, 0.94);
}
[data-theme='light'] .route-station-directions {
  color: #41534c;
}
[data-theme='light'] .reflection-modal {
  background: var(--surface);
}
[data-theme='light'] .reflection-modal-toolbar {
  background: rgba(255, 253, 247, 0.94);
}
[data-theme='light'] .audio-play-button {
  color: #4f3d12;
  background: rgba(255, 253, 247, 0.74);
}
@media (max-width: 720px) {
  .reflection-modal {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border: 0;
  }
  .reflection-modal-content {
    height: auto;
    padding: 0 20px 32px;
    overflow-y: auto;
  }
  .reflection-modal-toolbar {
    min-height: 58px;
    margin: 0;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #52655c;
    background: var(--surface);
  }
  .reflection-modal-accessibility > button {
    width: 34px;
    height: 34px;
    border: 1px solid #806923;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    font:
      700 12px/1 Manrope,
      sans-serif;
  }
  .reflection-modal-close {
    width: 34px;
    height: 34px;
  }
  .reflection-modal-top {
    gap: 10px;
  }
  .reflection-modal h2 {
    font-size: 27px;
  }
}

:root {
  --line: #705b21;
}
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid #806923;
  color: #eadca8;
  background: rgba(23, 20, 12, 0.58);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.route-card {
  border-color: #705b21;
}
.dark-band {
  background: #0e0d09;
}
.hero-route {
  border-left-color: rgba(242, 215, 140, 0.55);
}
.route-line {
  background: #c69a35;
}
.route-line::after {
  background: #f2d78c;
}
[data-theme='light'] {
  --line: #b39642;
}
[data-theme='light'] .site-footer {
  color: #26312d;
  background: rgba(244, 241, 232, 0.52);
}

@media (prefers-reduced-motion: reduce) {
  .background-video {
    display: none;
  }
}