/* ==========================================================================
   routes.css — the /routes surface (pack pages + index)
   --------------------------------------------------------------------------
   Ported from the Claude Design prototypes ("Japan Classic 14 Days",
   "Shared Trip - Web"), which are authored with inline styles because that is
   the prototype idiom. Here the same design is expressed as classes so the
   30 generated pages stay small, share one cache entry, and can carry real
   media queries — the prototypes are desktop-only by construction.

   Depends on colors_and_type.css for every colour and type token.
   Phase 2 (/s/<token> shared trips) reuses this file unchanged; the only
   difference there is which policy the generator applies, not the styling.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

body.rt {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--body-md-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.rt a { color: var(--primary); }
.rt a:hover { color: var(--primary-bright); }

/* Keyboard users need to reach the itinerary without tabbing the whole nav. */
.rt-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--surface);
  color: var(--on-surface);
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  font-weight: 700;
}
.rt-skip:focus { left: 12px; top: 12px; }

.rt-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */

.rt-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--ghost-border);
}
.rt-nav-in {
  height: 68px;
  display: flex;
  align-items: center;
  gap: 24px;
}
/* The wordmark, matching the marketing site's nav. index.html inverts it to
   white over the dark hero and drops the filter once the nav goes light
   (main.js); these pages have a light glass nav throughout, so the artwork is
   used in its natural dark form with no filter. */
.rt-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.rt-brand img {
  height: 22px;
  width: auto;
  display: block;
}
.rt-brand-sm img { height: 20px; }
.rt-chip {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  background: var(--surface-container-low);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  text-decoration: none;
  white-space: nowrap;
}
a.rt-chip:hover { background: var(--surface-container); color: var(--on-surface); }
.rt-nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gradient-primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-lg);
  padding: 13px 20px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-ambient-cta);
  transition: transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.rt-btn:hover { color: var(--on-primary); }
.rt-btn:active { transform: scale(0.98); }
.rt-btn-sm { padding: 10px 18px; font-size: 14px; }
.rt-btn-block { width: 100%; }
.rt-btn-count {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  background: rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-full);
  padding: 3px 8px;
}
.rt-link-mono {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.rt-hero {
  position: relative;
  height: 540px;
  overflow: hidden;
  background: var(--inverse-surface);
}
.rt-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rt-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(49, 48, 45, 0) 8%,
    rgba(49, 48, 45, 0.55) 42%,
    rgba(49, 48, 45, 0.9) 100%
  );
}
.rt-hero-in {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 56px;
}
.rt-hero-kicker {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inverse-primary);
  margin-bottom: 14px;
}
.rt-hero-title {
  display: flex;
  align-items: flex-end;
  gap: 36px;
  flex-wrap: wrap;
}
.rt-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  letter-spacing: var(--tracking-tight);
  line-height: 1.02;
  color: var(--surface);
  margin: 0;
  max-width: 640px;
}
.rt-accent {
  font-family: var(--font-accent);
  font-size: 52px;
  line-height: 0.9;
  color: var(--primary-bright);
  transform: rotate(-3deg);
  padding-bottom: 6px;
  display: inline-block;
}
.rt-hero-route {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--surface-container-highest);
  margin-top: 20px;
}

/* ── Body grid ───────────────────────────────────────────────────────────── */

.rt-body {
  display: flex;
  flex-wrap: wrap;
  gap: 72px;
  align-items: flex-start;
  padding-top: 56px;
}
.rt-main { flex: 1 1 600px; min-width: 0; }
.rt-aside {
  flex: 0 1 360px;
  min-width: 300px;
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rt-eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 24px;
}
.rt-eyebrow-primary { color: var(--primary); }
.rt-lede {
  font-size: 19px;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 62ch;
}
.rt-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--on-surface-variant);
  margin: 0 0 32px;
  max-width: 62ch;
}

/* ── Day scrubber ────────────────────────────────────────────────────────── */

.rt-scrub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
  padding: 0;
  list-style: none;
}
.rt-scrub a {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--on-surface-variant);
  background: var(--surface-container-low);
  border-radius: var(--radius-full);
  padding: 6px 12px;
}
.rt-scrub a:hover { background: var(--primary-fixed); color: var(--on-primary-fixed); }

/* ── Route spine ─────────────────────────────────────────────────────────── */

.rt-spine { position: relative; padding-left: 40px; }
.rt-spine::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 24px;
  width: 2px;
  background: var(--outline-variant);
}
.rt-day {
  position: relative;
  margin-bottom: 56px;
  scroll-margin-top: 88px;
}
.rt-day::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--primary-bright);
  box-shadow: 0 0 0 4px rgba(255, 92, 0, 0.16);
}
.rt-day-kicker {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.rt-day h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin: 0 0 10px;
}
.rt-day-intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-surface-variant);
  margin: 0 0 8px;
  max-width: 58ch;
}

/* ── Stop ────────────────────────────────────────────────────────────────── */

.rt-stop { padding: 20px 0 4px; }
.rt-stop-meta {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 6px;
}
.rt-stop-meta b { color: var(--primary); font-weight: 600; }
.rt-stop h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.rt-stop p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-surface-variant);
  margin: 0;
  max-width: 56ch;
}
.rt-booking { margin-top: 12px; }
.rt-booking a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: var(--radius-lg);
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.rt-booking a:hover { color: var(--on-secondary-container); opacity: 0.9; }

/* ── Transfer panel ──────────────────────────────────────────────────────── */

.rt-transfer {
  background: var(--inverse-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-ambient-lg);
  padding: 16px 20px;
  margin: 4px 0 12px;
}
.rt-transfer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inverse-primary);
}
.rt-transfer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
}
.rt-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--inverse-on-surface);
  line-height: 1;
}
.rt-code-sub {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inverse-primary);
  margin-top: 3px;
}
.rt-transfer-line {
  flex: 1;
  display: flex;
  align-items: center;
}
.rt-transfer-line i {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--primary-bright);
  flex: none;
}
.rt-transfer-line s {
  flex: 1;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.3);
  text-decoration: none;
}
.rt-transfer-line em {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--primary-bright);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: normal;
  flex: none;
}
.rt-transfer-end { text-align: right; }

/* ── Unscheduled tail ────────────────────────────────────────────────────── */

.rt-tail {
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  margin-top: 48px;
}
.rt-tail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 14px 0 0;
  list-style: none;
}
.rt-tail-chips li {
  font-size: 14px;
  font-weight: 600;
  background: var(--surface);
  border-radius: var(--radius-full);
  padding: 8px 14px;
}
.rt-tail p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-surface-variant);
  margin: 16px 0 0;
  max-width: 56ch;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.rt-stats {
  background: var(--inverse-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-ambient-lg);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0;
}
.rt-stats div { display: flex; flex-direction: column; gap: 5px; }
.rt-stats dt {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inverse-primary);
}
.rt-stats dd {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  color: var(--inverse-on-surface);
  line-height: 1;
  margin: 0;
}
.rt-stats dd.hi { color: var(--primary-container-soft); }

.rt-map-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rt-map-note {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-top: 8px;
}

.rt-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  padding: 24px 24px 28px;
}
.rt-card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  margin: 0 0 8px;
}
.rt-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-surface-variant);
  margin: 0 0 16px;
}
.rt-card-foot {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-top: 12px;
  text-align: center;
}
.rt-fine {
  font-size: 12px;
  line-height: 1.5;
  color: var(--on-surface-variant);
  margin: 0;
  padding: 0 4px;
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.rt-section { margin-top: 88px; }
.rt-section > h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin: 0 0 36px;
}
.rt-prose { max-width: 760px; }
.rt-faq { display: flex; flex-direction: column; gap: 32px; }
.rt-faq h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.rt-faq p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--on-surface-variant);
  margin: 0;
  max-width: 62ch;
}

/* ── App CTA band ────────────────────────────────────────────────────────── */

.rt-cta {
  background: var(--surface-container);
  border-radius: var(--radius-xl);
  padding: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 56px;
  align-items: center;
}
.rt-cta-title { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.rt-cta-title h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  margin: 0;
}
.rt-cta-title .rt-accent { font-size: 44px; transform: rotate(-2deg); }
.rt-cta p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--on-surface-variant);
  margin: 16px 0 28px;
  max-width: 52ch;
}
.rt-stores { display: flex; gap: 14px; flex-wrap: wrap; }
.rt-store {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  border: none;
  border-radius: var(--radius-lg);
  padding: 10px 20px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.rt-store:hover { color: var(--inverse-on-surface); }
.rt-store small {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-inverse-surface-variant);
}
.rt-store b { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.rt-qr {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.rt-qr svg { width: 160px; height: 160px; display: block; }
.rt-qr figcaption {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  text-align: center;
}

/* ── Route cards (index + "more routes") ─────────────────────────────────── */

.rt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.rt-rcard {
  display: block;
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--on-surface);
  height: 100%;
  transition: transform var(--dur-fast) var(--ease-out);
}
.rt-rcard:hover { color: var(--on-surface); transform: translateY(-2px); }
.rt-rcard img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background: var(--surface-container-high);
}
.rt-rcard-body { padding: 22px 24px 26px; }
.rt-rcard-meta {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 8px;
}
.rt-rcard h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 6px;
  line-height: 1.15;
}
.rt-rcard-route {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--on-surface-variant);
}
.rt-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.rt-section-head h2 { margin: 0; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.rt-footer { margin-top: 88px; padding-bottom: 48px; }
.rt-footer-in {
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.rt-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.rt-footer a,
.rt-footer-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-surface-variant);
}
.rt-footer-tag { margin-left: auto; font-size: 9px; letter-spacing: 0.12em; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .rt-aside { position: static; flex: 1 1 100%; }
  .rt-body { gap: 48px; }
  .rt-cta { padding: 48px; grid-template-columns: 1fr; gap: 36px; }
  .rt-qr { max-width: 260px; }
}

@media (max-width: 720px) {
  .rt-wrap { padding: 0 20px; }
  .rt-hero { height: 420px; }
  .rt-hero h1 { font-size: 40px; }
  .rt-accent { font-size: 34px; }
  .rt-hero-title { gap: 16px; }
  .rt-body { padding-top: 36px; gap: 36px; }
  .rt-spine { padding-left: 28px; }
  .rt-day::before { left: -28px; width: 11px; height: 11px; }
  .rt-day { margin-bottom: 44px; }
  .rt-day h2 { font-size: 24px; }
  .rt-lede { font-size: 17px; }
  .rt-section { margin-top: 56px; }
  .rt-section > h2 { font-size: 28px; margin-bottom: 28px; }
  .rt-cta { padding: 32px 24px; }
  .rt-cta-title h2 { font-size: 32px; }
  .rt-cta-title .rt-accent { font-size: 30px; }
  .rt-stats { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .rt-tail { padding: 22px 20px; }
  .rt-footer-in { padding: 24px; }
  .rt-footer-tag { margin-left: 0; }
  .rt-nav-in { gap: 12px; }
  .rt-nav-actions { gap: 10px; }
}

/* The nav's secondary link is noise on a small screen — the sticky CTA and the
   in-page cards already carry the same action. Below 560px the "All routes"
   chip goes too: the wordmark is wider than an icon, and wordmark + chip + CTA
   overflows 375px. The wordmark stays (it is the brand and the way home) and
   the footer still carries an All-routes link. */
@media (max-width: 560px) {
  .rt-nav-hide { display: none; }
  .rt-nav .rt-chip { display: none; }
  .rt-brand img { height: 20px; }
  .rt-rcard img { height: 168px; }
}

/* The floating bar is fixed, so the last section needs clearance or it sits
   permanently underneath it. */
@media (max-width: 1080px) {
  body.rt { padding-bottom: 88px; }
}

/* ── Floating save bar ───────────────────────────────────────────────────── */

/* The floating save bar exists for viewports where the sticky sidebar (which
   already carries a persistent "Save these places" card) has collapsed into
   the flow. Showing both on desktop puts two identical CTAs on top of each
   other in the bottom-right corner. */
.rt-fab { display: none; }
@media (max-width: 1080px) {
  .rt-fab {
    display: block;
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 60;
  }
}
@media (max-width: 720px) {
  .rt-fab { right: 16px; left: 16px; bottom: 16px; }
  .rt-fab .rt-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rt * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .rt-nav, .rt-fab, .rt-qr, .rt-stores, .rt-cta { display: none !important; }
  .rt-hero { height: 260px; }
  .rt-aside { display: none; }
}

/* Byline — author + dates. A visible, machine-readable publication date backs
   the datePublished/dateModified in the JSON-LD; search and AI-search systems
   both weight dated, attributable content, and an invisible date in schema
   alone is a weaker (and more easily discounted) claim. */
.rt-byline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
  margin: -14px 0 20px;
}
.rt-byline span { color: var(--on-surface); font-weight: 600; }

/* Breadcrumb — visible, matching the BreadcrumbList JSON-LD. Google expects
   correspondence between the markup and something a reader can actually see. */
.rt-crumbs { padding-top: 20px; padding-bottom: 4px; }
.rt-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rt-crumbs li { display: flex; gap: 8px; align-items: center; color: var(--on-surface-variant); }
.rt-crumbs li + li::before { content: "/"; color: var(--outline); }
.rt-crumbs a { color: var(--on-surface-variant); text-decoration: none; }
.rt-crumbs a:hover { color: var(--primary); }
.rt-crumbs [aria-current] { color: var(--on-surface); }

/* The query-shaped heading above the day spine. The h1 is the pack's own name
   ("Japan for First Timers"), which never contains the words people actually
   search — "9-day Japan itinerary" — so that phrasing gets its own heading. */
.rt-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  margin: 0 0 28px;
}
@media (max-width: 720px) {
  .rt-section-title { font-size: 22px; margin-bottom: 22px; }
  .rt-crumbs { padding-top: 14px; }
}