/* Shared styling for the three Walking-access info pages:
   mrt.html · yha.html · wainwrights.html
   Standard format: safety/emergency top → entries → how it works → donate bottom */

:root {
  --bg:        #0e1420;
  --bg-card:   #161e2e;
  --bg-soft:   #1a2238;
  --ink:       #e8ecf2;
  --ink-soft:  #b0b8c4;
  --muted:     #7a8499;
  --rule:      #2a3550;
  --gold:      #ffd166;
  --gold-d:    #b38a2f;
  --link:      #4a9ad6;
}
/* Per-page accent colour */
.page-mrt           { --accent: #c83434; --accent-2: #a8392c; }    /* rescue red */
.page-yha           { --accent: #5e3a8a; --accent-2: #4a2a72; }    /* YHA purple */
.page-wainwrights   { --accent: #c89b3c; --accent-2: #a07725; }    /* walking gold */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: 'Helvetica Neue', -apple-system, system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.55;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── HERO ── */
.hero {
  background: linear-gradient(135deg, #1a2238 0%, #0e1420 100%);
  border-bottom: 1px solid var(--rule);
  padding: 36px 24px 24px;
}
.hero-inner { max-width: 1100px; margin: 0 auto; }
.hero-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--gold); margin-bottom: 6px;
}
.hero h1 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 34px; font-weight: 700; line-height: 1.15;
  color: var(--ink); margin: 0 0 8px;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-deck { font-size: 16px; color: var(--ink-soft); max-width: 760px; margin: 0; }
.hero-meta {
  margin-top: 18px; display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.hero-meta span:before { content: '✓'; color: #5b8a3a; margin-right: 4px; font-weight: bold; }

/* ── CONTAINER ── */
.wrap { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; }

/* ── EMERGENCY ACTIONS ── */
.emergency-actions {
  background: linear-gradient(135deg, #2a1a1a 0%, #1a1f2e 100%);
  border: 1px solid var(--accent-2);
  border-left: 5px solid var(--accent);
  padding: 24px 26px;
  border-radius: 6px;
  margin-bottom: 28px;
}
.emergency-actions h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 22px; color: var(--ink); margin: 0 0 14px;
}
.emergency-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.emergency-card {
  background: rgba(20, 26, 40, 0.6);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px;
  font-size: 13px;
  color: var(--ink-soft);
  position: relative;
}
.emergency-card.emergency-primary {
  border-color: var(--accent);
  background: rgba(200, 52, 52, 0.08);
}
.emergency-card .emergency-num {
  position: absolute; top: -10px; left: 12px;
  background: var(--accent); color: white;
  width: 24px; height: 24px; border-radius: 50%;
  font-weight: 700; display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.emergency-card h3 {
  margin: 2px 0 6px; color: var(--ink);
  font-size: 15px; font-weight: 600;
}
.emergency-card p { margin: 0; line-height: 1.5; }
.emergency-footnote {
  margin: 16px 0 0; font-size: 13px; color: var(--ink-soft);
  padding-top: 14px; border-top: 1px solid var(--rule);
}

/* ── SAFETY PREP ── */
.safety-prep {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  padding: 20px 24px; margin-bottom: 28px; border-radius: 4px;
}
.safety-prep h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 20px; color: var(--gold); margin: 0 0 12px;
}
.prep-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.prep-grid h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); margin: 0 0 8px; font-weight: 600;
}
.prep-grid ul {
  margin: 0; padding-left: 22px;
  color: var(--ink-soft); font-size: 13.5px; line-height: 1.6;
}
.prep-grid li { margin-bottom: 4px; }

/* ── INFO STRIP ── */
.info-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-bottom: 28px;
}
.stat {
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: 4px; padding: 16px 18px;
}
.stat-num {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 30px; font-weight: 700; color: var(--gold);
  line-height: 1; margin-bottom: 4px;
}
.stat-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.stat-sub { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* ── JUMP-TO NAV ── */
.team-nav {
  background: var(--bg-soft); border: 1px solid var(--rule);
  border-radius: 4px; padding: 14px 18px; margin-bottom: 28px;
}
.team-nav-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gold); font-weight: 700; margin-bottom: 10px;
}
.team-nav-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.team-nav-grid a {
  background: var(--bg-card); border: 1px solid var(--rule);
  padding: 8px 10px; border-radius: 3px;
  font-size: 13px; color: var(--ink); text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.team-nav-grid a:hover {
  border-color: var(--gold); background: #1f2a42; text-decoration: none;
}

/* ── ENTRY CARDS (team / hostel / start point) ── */
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  padding: 24px 26px;
  margin-bottom: 18px;
  scroll-margin-top: 20px;
}
.team-card h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 22px; font-weight: 700; color: var(--ink);
  margin: 0 0 8px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.team-status {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: #5b8a3a; background: rgba(91, 138, 58, 0.15);
  padding: 3px 8px; border-radius: 3px; font-weight: 700;
}
.team-firsts {
  font-size: 11px; color: var(--gold); background: rgba(255, 209, 102, 0.1);
  padding: 3px 8px; border-radius: 3px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.team-warn {
  font-size: 11px; color: #d18b3a; background: rgba(209, 139, 58, 0.12);
  padding: 3px 8px; border-radius: 3px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.team-tagline {
  font-size: 14px; color: var(--accent); font-weight: 500;
  margin: -4px 0 14px;
}
.team-facts {
  display: grid; grid-template-columns: 170px 1fr; gap: 4px 14px;
  font-size: 13px; margin-bottom: 14px;
}
.team-facts dt { color: var(--muted); font-weight: 500; }
.team-facts dd { margin: 0; color: var(--ink-soft); }
.team-facts dd strong { color: var(--ink); }
.team-history { font-size: 13.5px; color: var(--ink-soft); margin: 12px 0; line-height: 1.6; }
.team-history em { color: var(--gold); font-style: italic; }
.team-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.team-actions a {
  padding: 7px 14px; font-size: 13px; border-radius: 3px;
  border: 1px solid var(--rule); background: var(--bg-soft);
  color: var(--ink); transition: all 0.15s;
}
.team-actions a:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }

/* ── HOW IT WORKS ── */
.how-it-works {
  margin: 36px 0 28px;
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: 4px; padding: 22px 26px;
}
.how-it-works h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 22px; color: var(--gold); margin: 0 0 14px;
}
.how-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px;
}
.how-grid h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); margin: 0 0 6px; font-weight: 600;
}
.how-grid p { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.6; }

/* ── DONATE SECTION (bottom) ── */
.donate-section {
  background: linear-gradient(135deg, rgba(200, 52, 52, 0.06) 0%, rgba(26, 34, 56, 0.4) 100%);
  border: 1px solid var(--accent-2);
  border-radius: 6px; padding: 26px 28px;
  margin: 32px 0 28px;
}
.donate-section h2 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 24px; color: var(--ink); margin: 0 0 8px;
}
.donate-lead { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 18px; line-height: 1.6; max-width: 800px; }
.donate-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.donate-card {
  background: var(--bg-card); border: 1px solid var(--rule);
  padding: 12px 14px; border-radius: 3px;
  display: flex; flex-direction: column; gap: 4px;
  color: var(--ink); font-size: 13px; font-weight: 500;
  transition: all 0.15s;
}
.donate-card span { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.donate-card:hover {
  border-color: var(--accent); background: rgba(200, 52, 52, 0.08); text-decoration: none;
}
.donate-card.donate-primary {
  grid-column: 1 / -1;
  border-color: var(--accent); border-width: 2px;
  background: rgba(200, 52, 52, 0.1);
  font-size: 15px;
}
.donate-card.donate-primary strong { color: var(--ink); }

/* ── FOOTER ── */
footer {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--muted); line-height: 1.5;
}
footer a { color: var(--ink-soft); }

/* ── RESPONSIVE ── */
@media (max-width: 800px) {
  .emergency-grid, .info-strip, .donate-grid { grid-template-columns: repeat(2, 1fr); }
  .team-nav-grid { grid-template-columns: repeat(2, 1fr); }
  .prep-grid, .how-grid { grid-template-columns: 1fr; }
  .team-facts { grid-template-columns: 1fr; gap: 2px; }
  .team-facts dt { margin-top: 8px; }
  .hero h1 { font-size: 26px; }
}
@media (max-width: 480px) {
  .emergency-grid, .info-strip, .donate-grid, .team-nav-grid { grid-template-columns: 1fr; }
}