:root {
  --black: #090a09;
  --surface: #111310;
  --surface-2: #171a16;
  --gold: #c9a84c;
  --gold-light: #e8c97a;
  --text: #f1eee7;
  --muted: #bbb5a8;
  --border: rgba(201, 168, 76, 0.2);
  --route-a: rgba(40, 73, 48, 0.72);
  --route-b: rgba(94, 76, 35, 0.3);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--text);
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  line-height: 1.75;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }

body[data-route-theme="hub"] { --route-a: rgba(44, 70, 48, 0.78); --route-b: rgba(120, 93, 38, 0.26); }
body[data-route-theme="north-south"] { --route-a: rgba(28, 66, 58, 0.84); --route-b: rgba(139, 100, 42, 0.24); }
body[data-route-theme="stairway"] { --route-a: rgba(39, 55, 82, 0.86); --route-b: rgba(183, 157, 87, 0.24); }
body[data-route-theme="south-full"] { --route-a: rgba(68, 47, 35, 0.86); --route-b: rgba(126, 91, 45, 0.3); }
body[data-route-theme="south-short"] { --route-a: rgba(55, 68, 39, 0.86); --route-b: rgba(111, 126, 58, 0.23); }
body[data-route-theme="love-mountain"] { --route-a: rgba(71, 40, 57, 0.85); --route-b: rgba(143, 102, 66, 0.25); }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 999;
  padding: 10px 14px;
  background: var(--gold-light);
  color: var(--black);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 40px;
  padding: 0 max(24px, 5vw);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(5, 6, 5, 0.84), rgba(5, 6, 5, 0.18));
}
.brand {
  margin-right: auto;
  color: var(--text);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  text-decoration: none;
  text-transform: uppercase;
}
.brand span { color: var(--gold); }
.site-header nav { display: flex; gap: 26px; }
.site-header nav a, .header-contact {
  color: #d4cec1;
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--gold-light); }
.header-contact { padding: 9px 13px; border: 1px solid var(--border); }

.route-hero {
  position: relative;
  display: flex;
  min-height: min(840px, 94vh);
  align-items: flex-end;
  padding: 150px max(24px, 7vw) 76px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 26%, var(--route-b), transparent 26%),
    radial-gradient(circle at 30% 15%, var(--route-a), transparent 42%),
    linear-gradient(135deg, #080a08 16%, #111611 55%, #080908);
}
.route-hero::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.15;
  background-image:
    linear-gradient(115deg, transparent 0 49.5%, rgba(255,255,255,0.15) 50%, transparent 50.5%),
    repeating-radial-gradient(circle at 82% 32%, transparent 0 35px, rgba(201,168,76,0.18) 36px 37px, transparent 38px 70px);
  content: "";
}
.route-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(5, 6, 5, 0.96), transparent 70%);
  content: "";
}
.route-hero__media { position: absolute; inset: 0; z-index: auto; margin: 0; overflow: hidden; }
.route-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.78; }
.route-hero__media figcaption { position: absolute; top: 98px; right: max(24px, 5vw); z-index: 3; padding: 7px 10px; border: 1px solid rgba(201,168,76,0.28); background: rgba(6,7,6,0.72); color: #c9c1b3; font-size: 0.58rem; letter-spacing: 0.11em; text-transform: uppercase; }
.route-hero__inner { position: relative; z-index: 2; width: min(980px, 100%); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold-light); }
.eyebrow, .section-label, .status-code { color: var(--gold); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.route-hero h1 {
  max-width: 980px;
  margin: 15px 0 22px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3.3rem, 8vw, 7.2rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.route-hero--hub h1 { font-size: clamp(4.2rem, 10vw, 8.2rem); }
.route-hero__inner > p { max-width: 760px; margin: 0; color: #d1cbc0; font-family: "Cormorant Garamond", serif; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-style: italic; line-height: 1.45; }
.hero-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; max-width: 760px; margin-top: 40px; background: var(--border); border: 1px solid var(--border); }
.hero-facts div { padding: 20px; background: rgba(10, 12, 10, 0.8); }
.hero-facts strong { display: block; color: var(--gold-light); font-family: "Cormorant Garamond", serif; font-size: 1.25rem; font-weight: 400; line-height: 1.2; }
.hero-facts span { display: block; margin-top: 8px; color: var(--muted); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; }

.wide-wrap { width: min(1180px, 100%); margin-inline: auto; }
.read-wrap { width: min(820px, 100%); margin-inline: auto; }
.route-section { padding: 94px 24px; border-bottom: 1px solid var(--border); }
.route-section--muted { background: #0d0f0c; }
.route-section h2, .contact-cta h2 {
  margin: 14px 0 28px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.section-lead, .route-section p { color: var(--muted); }
.section-lead { max-width: 820px; margin-bottom: 38px; }

.route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.route-card { min-height: 300px; padding: 32px; border: 1px solid var(--border); background: linear-gradient(145deg, rgba(201,168,76,0.05), transparent 45%), var(--surface); }
.route-card:last-child:nth-child(odd) { grid-column: span 2; }
.route-card__type, .route-card__direction { color: var(--gold); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; }
.route-card h3 { margin: 16px 0 15px; font-family: "Cormorant Garamond", serif; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 400; line-height: 1.05; }
.route-card h3 a { text-decoration: none; }
.route-card h3 a:hover { color: var(--gold-light); }
.route-card p { margin: 0 0 22px; color: var(--muted); }
.route-card__direction { color: #d2cabd; }
.route-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.route-grid--compact .route-card { min-height: 250px; }
.route-grid--compact .route-card:last-child:nth-child(odd) { grid-column: auto; }

.route-layout { display: grid; grid-template-columns: minmax(250px, 0.55fr) minmax(0, 1fr); gap: clamp(40px, 8vw, 110px); align-items: start; }
.route-intro { position: sticky; top: 30px; }
.route-stops { margin: 0; padding: 0; list-style: none; counter-reset: route-stop; }
.route-stop { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 20px; padding: 0 0 38px; position: relative; }
.route-stop::before { position: absolute; top: 45px; bottom: -2px; left: 22px; width: 1px; background: linear-gradient(var(--gold), rgba(201,168,76,0.1)); content: ""; }
.route-stop:last-of-type::before { display: none; }
.stop-number { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-light); font-family: "Cormorant Garamond", serif; font-size: 1.2rem; background: var(--black); }
.stop-content { padding: 4px 0 0; }
.stop-type { color: var(--muted); font-size: 0.63rem; letter-spacing: 0.13em; text-transform: uppercase; }
.stop-content h3 { margin: 8px 0 5px; font-family: "Cormorant Garamond", serif; font-size: clamp(1.75rem, 3.2vw, 2.55rem); font-weight: 400; line-height: 1.05; }
.stop-content h3 a { text-decoration-color: rgba(201,168,76,0.35); text-underline-offset: 5px; }
.stop-content h3 a:hover { color: var(--gold-light); }
.stop-alias { color: var(--muted); font-size: 0.78rem; }
.return-badge { display: inline-block; margin-left: 8px; padding: 4px 7px; border: 1px solid var(--border); color: var(--gold); font-family: "Raleway", sans-serif; font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; }
.stop-children { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.stop-children li { padding: 7px 10px; border: 1px solid var(--border); background: var(--surface); color: #d2cabd; font-size: 0.75rem; }
.stop-children a { color: var(--gold-light); text-decoration: none; }
.route-transition { display: flex; align-items: center; gap: 16px; margin: -16px 0 34px 58px; padding: 15px 18px; border-left: 1px solid var(--gold); background: rgba(201,168,76,0.045); color: var(--muted); list-style: none; }
.route-transition strong { color: var(--text); font-family: "Cormorant Garamond", serif; font-size: 1.2rem; font-weight: 400; }
.finish-marker { grid-column: 2; display: flex; flex-direction: column; gap: 4px; margin-top: -30px; padding: 22px 26px; border: 1px solid var(--border); background: var(--surface); }
.finish-marker > span { color: var(--gold); }
.finish-marker strong { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; font-weight: 400; }
.finish-marker small { color: var(--muted); }

.back-link { margin-top: 34px; }
.back-link a { color: var(--gold-light); text-underline-offset: 4px; }

.contact-cta { display: flex; width: min(1180px, calc(100% - 48px)); margin: 90px auto; align-items: center; justify-content: space-between; gap: 30px; padding: 40px; border: 1px solid var(--border); background: radial-gradient(circle at 80% 0, rgba(201,168,76,0.12), transparent 38%), var(--surface); }
.contact-cta h2 { margin-bottom: 10px; font-size: clamp(2.2rem, 4vw, 3.5rem); }
.contact-cta p { max-width: 680px; margin: 0; color: var(--muted); }
.primary-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; flex-shrink: 0; padding: 13px 24px; border: 1px solid var(--gold); background: var(--gold); color: var(--black); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; }
.primary-button:hover { background: var(--gold-light); }

.site-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; padding: 60px max(24px, 6vw); border-top: 1px solid var(--border); background: #070807; }
.site-footer strong { color: var(--gold-light); font-family: "Cormorant Garamond", serif; font-size: 2rem; font-weight: 400; }
.site-footer p { max-width: 520px; color: var(--muted); }
.site-footer nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 28px; align-content: start; }
.site-footer nav a { color: var(--muted); font-size: 0.75rem; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .site-header nav { display: none; }
  .route-hero { min-height: 800px; padding-top: 125px; }
  .hero-facts { grid-template-columns: 1fr; }
  .route-layout { grid-template-columns: 1fr; }
  .route-intro { position: static; }
  .finish-marker { grid-column: 1; }
  .contact-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 640px) {
  .site-header { min-height: 66px; padding-inline: 18px; }
  .brand { font-size: 1.05rem; letter-spacing: 0.22em; }
  .header-contact { display: none; }
  .route-hero { min-height: 760px; padding: 110px 20px 54px; }
  .route-hero__media figcaption { top: 82px; right: 20px; max-width: calc(100% - 40px); }
  .route-hero h1 { font-size: clamp(3rem, 16vw, 4.5rem); }
  .route-section { padding: 70px 20px; }
  .route-grid, .route-grid--compact { grid-template-columns: 1fr; }
  .route-card:last-child:nth-child(odd) { grid-column: auto; }
  .route-card { min-height: 0; padding: 26px; }
  .route-stop { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .stop-number { width: 40px; height: 40px; }
  .route-stop::before { top: 40px; left: 19px; }
  .route-transition { margin-left: 48px; }
  .contact-cta { width: calc(100% - 40px); margin-block: 60px; padding: 28px; }
  .primary-button { width: 100%; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer nav { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}