block (before @media print)
  2. Add the HTML + <script> block immediately after <!-- STATS BAR closing </div>
     and before <!-- TRAIL BODY
  3. alerts.json must live at /explore/alerts.json on the server
  4. Each page URL in alerts.json must exactly match the deployed page URL
     (trailing slash, no index.html suffix — the script normalises both)
  ============================================================ -->


<!-- ── STEP 1: Paste this CSS into the page <style> block ── -->
<style>
  /* ── TRAIL ALERT BANNER ── */
  #trail-alert-banner {
    display: none;
    background: #fff3cd;
    border-top: 3px solid #e8a020;
    border-bottom: 1px solid #f0d890;
    padding: 0.75rem 1.25rem;
    font-family: var(--f-body);
    font-size: 0.88rem;
    line-height: 1.55;
    color: #4a3a10;
    position: relative;
  }
  #trail-alert-banner.has-warning {
    background: #fff3cd;
    border-top-color: #e8a020;
    color: #4a3a10;
  }
  #trail-alert-banner.has-danger {
    background: #fdf0f0;
    border-top-color: #c0392b;
    color: #5a1a1a;
  }
  .trail-alert-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: flex-start; gap: 0.75rem; }
  .trail-alert-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.05rem; }
  .trail-alert-body { flex: 1; }
  .trail-alert-status { font-family: var(--f-label); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.3rem; }
  .trail-alert-items { margin: 0; padding: 0; list-style: none; }
  .trail-alert-items li { margin-bottom: 0.2rem; }
  .trail-alert-items li:last-child { margin-bottom: 0; }
  .trail-alert-dismiss {
    background: none; border: none; cursor: pointer;
    font-size: 1.1rem; line-height: 1; color: inherit;
    opacity: 0.5; padding: 0.1rem 0.25rem; flex-shrink: 0;
    align-self: flex-start;
  }
  .trail-alert-dismiss:hover { opacity: 1; }
  @media (max-width: 600px) {
    #trail-alert-banner { padding: 0.65rem 1rem; font-size: 0.82rem; }
  }