/* =========================================================
   boston.css - Harbor Dusk city-guide overrides for activities.html.
   Deep navy backdrop with warm copper/gold accents.
   Uses the same serif fonts as the wedding site but in a
   dark, atmospheric "waterfront at twilight" palette.
   ========================================================= */

body.boston { background: var(--bg-1); color: var(--on); }
.boston .particles { opacity: 0.7; }

/* ---------- Nav on dark ---------- */
.boston .nav { border-bottom-color: var(--card-line); }
.boston .nav__names { color: var(--accent); }
.boston .nav__links a { color: var(--on-soft); }
.boston .nav__links a:hover,
.boston .nav__links a[aria-current] { color: var(--accent); }
.boston .amp { color: var(--accent-2); }

/* ---------- Intro ---------- */
.boston .page-intro { min-height: 42vh; padding-top: calc(var(--nav-h) + 3rem); gap: 0.6rem; }
.boston .page-intro .label { color: var(--accent-2); }
.boston .page-intro h1 {
  font-style: italic; font-weight: 600; letter-spacing: -0.015em;
  font-size: clamp(2.6rem, 1.8rem + 5vw, 5rem); color: var(--accent);
}
.boston .page-intro p { color: var(--on-soft); font-size: 1.15rem; max-width: 36ch; }

/* ---------- Section headers: editorial, left-aligned ---------- */
.boston .band { text-align: left; }
.boston .band > .label { display: block; text-align: left; color: var(--accent-2); }
.boston .band__title {
  text-align: left; font-style: italic; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.boston .band__title::before {
  content: "✦"; font-size: 0.45em; color: var(--accent-2);
  font-style: normal; position: relative; top: -0.08em;
}
.boston .band__intro { text-align: left; margin: 0 0 2rem; color: var(--on-soft); }

/* ---------- Cards: frosted glass on dark ---------- */
.boston .cards { gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.boston .card {
  background: rgba(255,255,255,0.05); border: 1px solid var(--card-line);
  border-radius: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  gap: 0.5rem; box-shadow: 0 10px 32px -12px rgba(0,0,0,0.40);
}
.boston .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.50);
  border-color: var(--accent-2);
  background: rgba(255,255,255,0.08);
}
.boston .card__media { border-radius: 13px 13px 0 0; height: clamp(165px, 21vw, 210px); }
.boston .card__kicker {
  align-self: flex-start; font-family: var(--display); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.62rem;
  color: var(--accent-2); background: var(--chip-bg);
  padding: 0.32em 0.72em; border-radius: 4px;
}
.boston .card h3 { font-style: italic; font-weight: 600; font-size: 1.35rem; color: var(--accent); }
.boston .card p { font-size: 1rem; color: var(--on); opacity: 0.78; line-height: 1.55; }
.boston .card .linkrow {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.78rem; color: var(--accent-2);
  border-bottom: 0; gap: 0.35rem;
}
.boston .card .linkrow:hover { color: var(--accent); }

/* ---------- Footer ---------- */
.boston .footer { border-top-color: var(--card-line); }
.boston .footer__motif { color: var(--accent-2); }
.boston .footer__blessing { font-style: italic; color: var(--accent); }
.boston .footer__sub { color: var(--on-soft); }
.boston .footer__credit a { color: var(--accent-2); }