/* =========================================
   Mess O' Pedals — home page
   Archive-first landing. Pairs with style.css + header.css.
   No inline styles anywhere; add a class here instead.
   ========================================= */

/* ---------- Hero ---------- */
.home-hero{
  /* not a .container section panel — this one breathes */
  background:none;
  border:none;
  padding:0 0 8px;
  margin-bottom:28px;
}
.home-hero + section{ margin-top:0; }

.container .home-statement{
  font-family:var(--font-mono);
  font-size:clamp(18px,2.6vw,26px);
  line-height:1.45;
  font-weight:600;
  color:var(--text);
  margin:0 0 18px;
  max-width:34ch;
  text-wrap:balance;
}
.container .home-statement .hl{ color:var(--accent); }

.container .home-sub{
  font-size:17px;
  color:var(--ink-dim);
  max-width:68ch;
  margin:0 0 14px;
}

/* terminal rule under the hero */
.home-rule{
  border:none;
  height:1px;
  background:linear-gradient(90deg,var(--accent),var(--pink),transparent);
  margin:22px 0 0;
}

/* ---------- Archive roll ---------- */
.archive-roll{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}
.archive-item{
  border:1px solid var(--hairline);
  border-left:2px solid var(--pink);
  background:rgba(8,0,12,0.45);
  padding:14px 16px;
}
.archive-item h3{
  margin:0 0 4px;
  font-family:var(--font-mono);
  font-size:15px;
  letter-spacing:0;
}
.archive-item h3 a{ color:var(--text); }
.archive-item h3 a:hover{ color:var(--accent); }
.container .archive-item p{
  margin:0;
  font-size:15px;
  color:var(--ink-dim);
}
.archive-by{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.5px;
  color:var(--accent);
  margin-bottom:6px;
}
.archive-item.is-memorial{ border-left-color:var(--accent); }

/* ---------- Route cards (Guides / Bench / Store) ---------- */
.home-routes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:16px;
}
.route-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  background:rgba(8,0,12,0.45);
  transition:border-color .15s steps(3);
}
.route-card:hover,
.route-card:focus-within{ border-color:var(--accent); }

/* photo sits in its own band ABOVE the text, never behind it (AAA) */
.route-photo{
  height:130px;
  background-color:var(--purple-deep);
  background-size:cover;
  background-position:center;
  border-bottom:1px solid var(--hairline);
}
.route-body{ padding:14px 16px 16px; }
.route-card h3{
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.route-card h3 a{ color:var(--text); }
.route-card h3 a::after{
  /* whole-card click target */
  content:"";
  position:absolute; inset:0;
}
.route-card h3 a:hover{ color:var(--accent); text-decoration:none; }
.container .route-card p{
  margin:0 0 10px;
  font-size:15px;
  color:var(--ink-dim);
}
.route-go{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--accent);
  margin-top:auto;
}

.rc-mosquito .route-photo{ background-image:url("/assets/img/cards/dead-bug-mosquito.webp"); }
.rc-hive    .route-photo{ background-image:url("/assets/img/cards/dead-bug-hive.webp"); }
.rc-isd      .route-photo{ background-image:url("/assets/img/cards/isd1820-module.webp"); }

/* ---------- Why-this-exists panel ---------- */
.why-panel{ border-left-color:var(--pink); }
.container .why-panel p{ font-size:16px; }
.why-panel .why-pull{
  font-family:var(--font-mono);
  color:var(--text);
  font-size:15px;
  border-left:2px solid var(--accent);
  padding-left:12px;
  margin:0 0 14px;
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .home-routes{ grid-template-columns:1fr; }
  .route-photo{ height:150px; }
}