@import url('/assets/sarge-editorial-2026.css');

.leftover-route-page .article-header h1 {
  max-width: 14ch;
  font-size: clamp(39px, 6vw, 68px);
}

.leftover-route-page .article-body h2 {
  color: #385448;
  font-size: clamp(27px, 4vw, 38px);
}

.route-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 40px 0 50px;
  overflow: hidden;
  border: 1px solid #c8b487;
  border-radius: 18px 4px 18px 4px;
  background: #c8b487;
}

.route-strip div {
  min-width: 0;
  padding: 22px 20px;
  background: #f5eedf;
}

.route-strip span {
  display: inline-grid;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 50%;
  background: #7b3b2d;
  color: #fff;
  font: 800 14px/1 Arial, Helvetica, sans-serif;
}

.route-strip strong,
.route-strip small { display: block; }
.route-strip strong { color: #263b32; font: 800 17px/1.3 Arial, Helvetica, sans-serif; }
.route-strip small { margin-top: 7px; color: #4c514d; font: 15px/1.45 Arial, Helvetica, sans-serif; }

.decision-table {
  margin: 36px 0 48px;
  overflow-x: auto;
  border: 1px solid #d8cbb0;
  border-radius: 10px;
}

.decision-table table { width: 100%; min-width: 640px; border-collapse: collapse; background: #fffdf8; }
.decision-table th,
.decision-table td { padding: 15px 16px; border-bottom: 1px solid #e7ddc9; text-align: left; vertical-align: top; }
.decision-table th { background: #385448; color: #fff; font: 800 14px/1.4 Arial, Helvetica, sans-serif; }
.decision-table td { color: #2f332f; font: 15px/1.5 Arial, Helvetica, sans-serif; }
.decision-table tbody tr:last-child td { border-bottom: 0; }

.body-figure { margin: 38px 0 42px; }
.body-figure img { display: block; width: 100%; height: auto; border-radius: 4px 18px 4px 18px; }
.body-figure figcaption { margin-top: 10px; color: #5d605d; font: 14px/1.5 Arial, Helvetica, sans-serif; }

.leftover-route-page .article-body a {
  color: #8a2d23;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.leftover-route-page .article-body a:hover { color: #385448; }
.leftover-route-page .article-body a:focus-visible { outline: 3px solid #d49a31; outline-offset: 3px; }

@media (max-width: 700px) {
  .route-strip { grid-template-columns: 1fr; }
  .route-strip div { padding: 18px; }
  .decision-table { margin-right: -8px; }
}