/* ============================================================================
   MON GR20 — Premium theme overlay
   ----------------------------------------------------------------------------
   Loaded LAST on every page. Keeps the existing markup, content and SEO intact
   and re-skins the whole site into the new premium "mineral / granite" art
   direction: deep granite greys, a single blaze-red accent (the red of the GR
   waymark blazes), Bricolage Grotesque display type, Manrope body, Space Mono
   labels, film-grain texture and sharpened architectural components.

   The original site is fully CSS-variable driven, so overriding the tokens
   flips most of the look automatically; the rules below also neutralise the
   hard-coded amber literals that remained in the legacy component CSS.
   ============================================================================ */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root {
  /* granite surfaces */
  --gr20-bg:        #0b0c0b;
  --gr20-bg-soft:   #111312;
  --gr20-panel:     rgba(233,231,223,.045);
  --gr20-panel-strong: rgba(233,231,223,.075);
  --gr20-text:      #e9e7df;
  --gr20-muted:     rgba(233,231,223,.72);
  --gr20-subtle:    rgba(233,231,223,.50);
  --gr20-line:      rgba(233,231,223,.12);
  --gr20-mountain:  #6f8f6c;

  /* blaze accent ramp */
  --gr20-accent:    #e2603f;   /* main accent — text/lines, AA on granite */
  --blaze:          #cf4a30;   /* vivid accent — larger / decorative */
  --blaze-btn:      #c2402a;   /* solid button fill (≥4.5:1 with #fff) */
  --blaze-deep:     #a93822;

  /* radii — tightened for an architectural feel */
  --gr20-radius:    9px;
  --gr20-radius-sm: 5px;
  --gr20-shadow:    0 30px 80px rgba(0,0,0,.46);

  /* legacy aliases used by the per-page inline styles */
  --bg:        #0b0c0b;
  --surface:   #111312;
  --surface2:  rgba(233,231,223,.06);
  --surface3:  rgba(233,231,223,.09);
  --border:    rgba(233,231,223,.12);
  --border2:   rgba(233,231,223,.17);
  --ink:       #e9e7df;
  --ink2:      #b6b4aa;
  --ink3:      #8b8a81;
  --accent:    #e2603f;
  --accent2:   #f0805f;
  --accent-dk: #a93822;
  --green:     #6f8f6c;
  --green2:    #88a98a;
  --cream:     #e9e7df;
  --radius:    9px;

  /* typography */
  --font-disp: "Bricolage Grotesque", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- 2. BASE ------------------------------------------------------------- */
html { background: var(--gr20-bg); scroll-padding-top: 84px; }

body {
  background:
    radial-gradient(circle at 16% -4%, rgba(207,74,48,.10), transparent 36rem),
    radial-gradient(circle at 88% 8%, rgba(111,143,108,.07), transparent 34rem),
    var(--gr20-bg) !important;
  color: var(--gr20-text);
  font-family: var(--font-body);
  letter-spacing: .003em;
}

::selection { background: var(--blaze); color: #fff; }

/* film-grain / mineral texture — fixed, non-interactive (added on top of any
   existing noise layer; harmless if the page already has one) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 3. DISPLAY TYPOGRAPHY ---------------------------------------------- */
h1, h2, h3,
.hero h1, .article-hero h1, .article-shell h1, .article-wrap h1, .legal-wrap h1,
.article-section h2, .article-shell h2, .article-wrap h2, .legal-wrap h2 {
  font-family: var(--font-disp);
  font-weight: 700;
  letter-spacing: -.02em;
}
.hero h1, .article-hero h1, .article-shell h1, .article-wrap h1, .legal-wrap h1 {
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .94;
}

/* mono kickers / eyebrows */
.kicker, .eyebrow, .article-eyebrow, .article-section__kicker,
.section-cta__eyebrow, .gr20-site-footer__heading, .gr20-site-footer__logo-main,
.site-brand__title {
  font-family: var(--font-mono);
  color: var(--gr20-accent);
  letter-spacing: .2em;
}

/* ---- 4. HEADER / NAV ----------------------------------------------------- */
.site-header {
  background: color-mix(in srgb, var(--gr20-bg) 80%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--gr20-line);
}
.site-brand__title { color: var(--gr20-accent); }
.site-brand__subtitle { color: var(--gr20-subtle); font-family: var(--font-mono); }

.site-nav a, .site-nav__trigger, .site-mobile-nav a {
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .01em;
}
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"],
.site-nav__dropdown-wrap:hover > .site-nav__trigger,
.site-nav__dropdown-wrap:focus-within > .site-nav__trigger,
.site-nav__dropdown-wrap.is-active > .site-nav__trigger,
.site-nav__dropdown-wrap.is-open > .site-nav__trigger,
.site-mobile-nav a:hover, .site-mobile-nav a:focus-visible,
.site-mobile-nav a[aria-current="page"] {
  border-color: color-mix(in srgb, var(--blaze) 42%, transparent);
  background: color-mix(in srgb, var(--blaze) 12%, transparent);
  color: var(--gr20-text);
}
.site-nav__chevron { color: var(--gr20-accent); }
.site-nav__dropdown {
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(233,231,223,.06), rgba(233,231,223,.03)), rgba(11,12,11,.98);
}
.site-nav .site-nav__dropdown a { border-radius: 5px; }
.site-nav .site-nav__dropdown a:hover,
.site-nav .site-nav__dropdown a:focus-visible,
.site-nav .site-nav__dropdown a[aria-current="page"] {
  border-color: color-mix(in srgb, var(--blaze) 36%, transparent);
  background: color-mix(in srgb, var(--blaze) 14%, transparent);
  color: var(--gr20-text);
}
.site-menu-toggle {
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 700;
}
.site-menu-toggle:hover, .site-menu-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--blaze) 48%, transparent);
  background: color-mix(in srgb, var(--blaze) 12%, transparent);
}

/* ---- 5. HERO (keeps each page's own background photo) ------------------- */
.hero .kicker, .hero .eyebrow { color: var(--gr20-accent); }
.hero h1 { color: var(--gr20-text); }
.hero .lead, .hero-lead { color: rgba(233,231,223,.82); }

/* stat blocks (jour pages use .stats; homepage uses .hero-stats/.hero-stat) */
.stats { border-radius: var(--gr20-radius-sm); }
.stats strong, .hero-stat strong { color: var(--gr20-accent); font-family: var(--font-disp); font-weight: 800; }

/* ---- 6. BUTTONS ---------------------------------------------------------- */
.btn, .article-button, .gr20-button, .stage-actions .btn,
.related-links a, .related-grid a, .section-cta__button,
.gr20-site-footer__button, .back-to-top {
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, background-color .4s, color .4s;
}
.btn:hover, .article-button:hover, .stage-actions .btn:hover,
.btn:focus-visible, .article-button:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blaze) 55%, transparent);
  background: color-mix(in srgb, var(--blaze) 12%, transparent);
  color: var(--gr20-text);
}
/* primary CTA — solid blaze, white text, accessible */
.btn.primary, .article-button--primary, .stage-actions .btn.primary,
.section-cta__button, .gr20-site-footer__button--primary {
  border-color: var(--blaze-btn);
  background: var(--blaze-btn);
  color: #fff;
  box-shadow: 0 14px 34px -18px rgba(194,64,42,.9);
}
.btn.primary:hover, .article-button--primary:hover,
.stage-actions .btn.primary:hover, .section-cta__button:hover,
.gr20-site-footer__button--primary:hover {
  transform: translateY(-2px);
  background: var(--blaze-btn);
  border-color: var(--blaze);
  color: #fff;
  box-shadow: 0 22px 46px -16px rgba(194,64,42,.98);
}

/* ---- 7. CONTENT CARDS / SECTIONS / TABLES / CALLOUTS ------------------- */
.card, .wide-card, .article-card, .check-card, .content-card,
.article-section, .legal-card, .panel, .stage-card {
  border-radius: var(--gr20-radius);
  border-color: var(--gr20-line);
}
.card, .wide-card {
  background: linear-gradient(180deg, rgba(233,231,223,.05), rgba(233,231,223,.022));
}

/* callouts — blaze left rule + wash (de-amber) */
.note, .stage-retain, .article-callout, .notice {
  border-left: 3px solid var(--blaze);
  border-radius: 0 var(--gr20-radius) var(--gr20-radius) 0;
  background: color-mix(in srgb, var(--blaze) 9%, transparent);
  color: rgba(233,231,223,.84);
}
.note strong, .stage-retain strong, .article-callout strong { color: var(--gr20-accent); }

/* tables */
.route-table, .weight-table, .simple-table,
.article-table, .article-table-wrap, .table-wrap {
  border-radius: var(--gr20-radius);
  border-color: var(--gr20-line);
}
.route-table th, .weight-table th, .simple-table th,
.article-table th, .article-table-wrap th, .table-wrap th,
th {
  color: var(--gr20-accent);
  font-family: var(--font-mono);
  background: rgba(233,231,223,.04);
}
td a { color: var(--gr20-accent); font-weight: 700; }

/* checklist boxes */
.check-list li::before, .check-list input { accent-color: var(--blaze); }
.check-list li::before {
  border-color: color-mix(in srgb, var(--blaze) 60%, transparent);
  background: color-mix(in srgb, var(--blaze) 10%, transparent);
}

/* "time" intro block on stage pages */
.time { border-radius: var(--gr20-radius); border-color: var(--gr20-line); background: var(--surface); }
.time strong { color: var(--gr20-accent); }

/* galleries */
.gallery img { border-radius: var(--gr20-radius-sm); border-color: var(--gr20-line); }

/* TOC */
.toc { border-radius: var(--gr20-radius); }
.toc a { color: var(--gr20-accent); }

/* section CTA / footer-cta panels (de-amber) */
.section-cta, .footer-cta {
  border-radius: var(--gr20-radius);
  border-color: color-mix(in srgb, var(--blaze) 28%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--blaze) 12%, transparent), rgba(233,231,223,.03));
}
.section-cta h3 { font-family: var(--font-disp); }
.section-cta__eyebrow { color: var(--gr20-accent); }

/* skip link + back-to-top */
.skip-link { background: var(--blaze); color: #fff; border-radius: 4px; }
.back-to-top {
  border-color: color-mix(in srgb, var(--blaze) 46%, transparent);
  background: rgba(14,16,14,.94);
}

/* short embeds (YouTube Shorts) */
.short-embed { border-radius: var(--gr20-radius); border-color: var(--gr20-line); }

/* ---- 8. FOOTER (de-amber, granite) ------------------------------------- */
.gr20-site-footer {
  background:
    radial-gradient(circle at 18% 0%, rgba(207,74,48,.12), transparent 34rem),
    radial-gradient(circle at 84% 18%, rgba(111,143,108,.08), transparent 30rem),
    linear-gradient(180deg, rgba(11,12,11,.96), #050605 72%);
}
.gr20-site-footer::before {
  background: linear-gradient(90deg, transparent, rgba(207,74,48,.08), transparent);
}
.gr20-site-footer__inner {
  border-radius: var(--gr20-radius);
  background: linear-gradient(135deg, rgba(233,231,223,.06), rgba(233,231,223,.03)), rgba(11,13,11,.74);
}
.gr20-site-footer__logo-main { color: var(--gr20-accent); }
.gr20-site-footer__logo-sub { font-family: var(--font-disp); font-weight: 800; }
.gr20-site-footer__heading { color: var(--gr20-accent); }
.gr20-site-footer__col { border-radius: var(--gr20-radius-sm); }
.gr20-site-footer__button { border-radius: 4px; }
.gr20-site-footer__col a:hover, .gr20-site-footer__col a:focus-visible,
.gr20-site-footer__bottom a:hover, .gr20-site-footer__bottom a:focus-visible {
  color: var(--gr20-accent);
}

/* ---- 9. HOMEPAGE-SPECIFIC SECTIONS ------------------------------------- */
/* The homepage uses its own bespoke classes; flip its accents to blaze and
   keep the photo-break parallax sections. Most colour comes through the token
   override above; these tidy the remaining literals. */
.summary-strip, .story-feature, .start-here, .memory-notes,
.gr20-video-section, .share-final, .section.no-card {
  color: var(--gr20-text);
}
.photo-break { border-radius: 0; }
.faq details, .faq summary { border-color: var(--gr20-line); }
.faq summary { font-family: var(--font-disp); }

/* ---- 10. MOTION ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .btn, .article-button, .card, .wide-card, .section-cta__button { will-change: transform; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--gr20-bg-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
}