/* Roxburgh Gorge: palette taken from the Clutha Gold Trail's official logo (periwinkle-blue brushstroke, sand-tan
   river, charcoal lettering, topo-map green) and used as colours only, never the logo or its wording.
   Archivo (heavy grotesque) + Public Sans.
   Layout is deliberately different from the sister sites: full-bleed photo hero, a route timeline with an
   "At a glance" panel, light ride cards, plain-numbered steps, a two-column FAQ and a split closing band. */
:root {
  --ink: #25282e;
  --muted: #565c66;
  --bg: #fbf8f1;
  --card: #ffffff;
  --line: #e6dfcf;
  --primary: #3b5f9f;
  --primary-deep: #1c2c4d;
  --highlight: #d4a86a;
  --accent: #96661f;
  --accent-hover: #7b5217;
  --hero-glow: rgb(212 168 106 / 22%);
  --band-from: #f2e8d4;
  --radius: 0.5rem;
  --btn-radius: 0.35rem;
  --shadow: 0 1px 2px rgb(28 44 77 / 7%), 0 8px 22px rgb(28 44 77 / 9%);
  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 800;
  --display-spacing: -0.02em;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { color: var(--primary); letter-spacing: 0.08em; }
.btn-primary { box-shadow: none; }

/* Header: brushstroke rule in the logo's blue and sand */
.site-header { background: var(--bg); backdrop-filter: none; border-bottom: 4px solid; border-image: linear-gradient(90deg, var(--primary) 0 55%, var(--highlight) 55% 100%) 1; }

/* Hero: full-bleed photo, text over a blue wash */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 0; background: var(--primary-deep); color: #fff; }
.hero .wrap { display: block; padding-top: 4.5rem; padding-bottom: 4rem; }
.hero .wrap > div:first-child { max-width: 38rem; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; object-fit: cover; object-position: 82% center; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(28 44 77 / 90%) 0%, rgb(28 44 77 / 68%) 48%, rgb(28 44 77 / 10%) 100%); }
.hero .eyebrow { color: var(--highlight); }
.hero h1 { color: #fff; }
.hero h1 .sub { display: block; font-size: 0.46em; font-weight: 700; letter-spacing: 0; line-height: 1.2; color: #f0cf96; margin-top: 0.6rem; }
.hero .lede { color: #eef1f7; }
.hero .btn-ghost { color: #fff; }
.route-chip { display: inline-block; margin: 1.75rem 0 0; padding: 0.5rem 0.9rem; border-left: 4px solid var(--highlight); background: rgb(255 255 255 / 12%); font-size: 0.95rem; }
.route-chip strong { margin-right: 0.4rem; }
@media (max-width: 51.99rem) { .hero-media::after { background: rgb(28 44 77 / 74%); } .hero .wrap { padding-top: 3rem; padding-bottom: 3rem; } }

/* Route timeline plus "at a glance" panel */
.route-section { background: var(--bg); }
.route-wrap { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .route-wrap { grid-template-columns: 1.5fr 0.8fr; gap: 4rem; } .glance { position: sticky; top: 6rem; } }
.route { list-style: none; margin: 0; padding: 0 0 0 1.6rem; border-left: 3px solid var(--primary); }
.route li { position: relative; padding: 0 0 1.6rem 1.4rem; }
.route li::before { content: ""; position: absolute; left: -2.15rem; top: 0.3rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--bg); border: 3px solid var(--primary); }
.route li:last-child { padding-bottom: 0; }
.route li:last-child::before { background: var(--highlight); border-color: var(--highlight); }
.route .km { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.route p { margin: 0; color: var(--muted); }
.route .boat { margin-left: -1.6rem; padding: 1.1rem 1.4rem 1.1rem 3rem; background: #e8eefa; border-radius: var(--radius); margin-bottom: 1.6rem; border-left: 3px dashed var(--primary); }
.route .boat::before { display: none; }
.glance { background: var(--band-from); border-top: 6px solid var(--highlight); border-radius: var(--radius); padding: 1.5rem 1.6rem; }
.glance h3 { margin-bottom: 0.8rem; }
.glance dl { margin: 0; }
.glance dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); margin-top: 0.9rem; }
.glance dd { margin: 0.15rem 0 0; font-weight: 600; }

/* Rides: light cards on white, not a dark band */
.rides { background: #fff; color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rides h2 { color: var(--ink); }
.rides .section-intro { color: var(--muted); }
.rides .eyebrow { color: var(--primary); }
.ride { background: var(--bg); border: 1px solid var(--line); border-top: 5px solid var(--primary); color: var(--ink); }
.ride:hover { background: #fff; border-color: var(--line); border-top-color: var(--highlight); transform: translateY(-3px); box-shadow: var(--shadow); }
.ride h3 { color: var(--primary-deep); }
.ride p { color: var(--muted); }
.tag { background: #e8eefa; color: var(--primary-deep); }
.tag-easy { background: #dcebd9; color: #1f4d28; }
.tag-mid { background: #f4e3c3; color: #6b4410; }
.ride .more { color: var(--accent); }

/* Callout: flat rows on a sand panel */
.callout { background: var(--band-from); border-radius: var(--radius); padding: 2.25rem 1.5rem; }
@media (min-width: 52rem) { .callout { padding: 3rem; gap: 3rem; } }
.tip-list li { background: transparent; box-shadow: none; border-left: 0; border-top: 2px solid var(--highlight); border-radius: 0; padding: 0.8rem 0 0.2rem; }

/* Steps: plain numerals on a rule, no cards */
.band { background: var(--bg); }
.steps li { background: transparent; box-shadow: none; border-radius: 0; border-top: 4px solid var(--primary); padding: 1rem 0 0; }
.steps li::before { display: block; width: auto; height: auto; border-radius: 0; background: none; color: var(--highlight); font-family: var(--font-display); font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: 0.4rem; text-align: left; }

/* FAQ: two columns, hairline rows */
.faq { max-width: none; display: grid; gap: 0 3.5rem; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); align-items: start; }
.faq .eyebrow, .faq h2 { grid-column: 1 / -1; }
.faq h2 { margin-bottom: 1.25rem; }
.faq details { background: transparent; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--line); margin: 0; }
.faq summary { padding-left: 0; padding-right: 0; }
.faq details p { padding-left: 0; padding-right: 0; }

/* Closing band: split, left-aligned, in the logo blue */
.cta-band { background: var(--primary-deep); border-top: 6px solid var(--highlight); text-align: left; }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.cta-band .wrap > * { margin: 0; }
.cta-band p { margin: 0.5rem 0 0; max-width: 30rem; }
.cta-band .btn-row { margin-top: 0; justify-content: flex-start; }
.cta-band .btn-primary { background: var(--highlight); color: var(--primary-deep); }
.cta-band .btn-primary:hover { background: #e3bd83; }