:root {
  --navy: #3C3B6E;
  --red: #B22234;
  --white: #FFFFFF;
  --parchment: #FFFFFF;
  --slate: #4A4A68;
  --brass: #B22234;
  --serif: "Libre Caslon Text", "Playfair Display", Georgia, serif;
  --sans: "Source Sans 3", Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--parchment); color: var(--navy); font-family: var(--sans); line-height: 1.6; }
h1, h2, h3, .brand { font-family: var(--serif); }
a { color: var(--red); }
main { max-width: 60rem; margin: 0 auto; padding: 2rem 1rem; }
.site-header { background: var(--navy); color: var(--parchment); position: relative; }
.ridgeline { display: block; width: 100%; height: 40px; fill: var(--red); opacity: 1; }
.nav { display: flex; justify-content: space-between; align-items: center; max-width: 60rem; margin: 0 auto; padding: .75rem 1rem; }
.nav a { color: var(--parchment); text-decoration: none; }
.nav ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; }
.brand { font-size: 1.4rem; }
.star { color: var(--white); }
.label { font-variant: small-caps; letter-spacing: .08em; color: var(--slate); }
.hero h1 { font-size: 3rem; margin: .25rem 0; }
.lede { font-size: 1.2rem; max-width: 40rem; }
.button { display: inline-block; background: var(--red); color: var(--parchment); padding: .6rem 1.2rem; text-decoration: none; border-radius: 2px; }
.stripe-rule { border: 0; height: 6px; margin: 2rem 0; background: repeating-linear-gradient(to bottom, var(--red) 0 2px, var(--parchment) 2px 4px); }
.tiers, .listing-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.card, .tiers li { background: #fff; border: 1px solid #c9c9d9; border-top: 3px solid var(--navy); padding: 1rem; }
.filters { display: flex; flex-wrap: wrap; gap: 1rem; }
.filters label { display: flex; flex-direction: column; font-variant: small-caps; color: var(--slate); }
.meta, .placeholder { color: var(--slate); }
.badge { display: inline-block; font-variant: small-caps; letter-spacing: .06em; padding: .1rem .6rem; border-radius: 999px; font-size: .9rem; }
.badge-verified { background: var(--navy); color: var(--white); padding-left: 1.6rem; background-repeat: no-repeat; background-position: .35rem center; background-size: 1rem 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23B22234' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='20' cy='20' r='13' fill='none' stroke='%23fff' stroke-width='1' stroke-dasharray='2 2'/%3E%3Cpath fill='%23fff' d='M20 9l3.2 6.6 7.3 1-5.3 5.1 1.3 7.2L20 25.5l-6.5 3.4 1.3-7.2-5.3-5.1 7.3-1z'/%3E%3C/svg%3E"); }
.badge-unverified { border: 1px solid var(--slate); color: var(--slate); }
.badge-uses { border: 2px double var(--red); color: var(--red); background: var(--white); border-radius: 3px; transform: rotate(-2deg); }
.map-placeholder { height: 12rem; background: #eef0f6; border: 1px dashed var(--slate); }
.site-footer { text-align: center; color: var(--slate); padding: 0 1rem 2rem; }

/* Patriotic hero */
.hero { position: relative; background: var(--white); border: 1px solid #c9c9d9; overflow: hidden; }
.hero-band { display: block; width: 100%; height: 56px; }
.hero-body { position: relative; background: var(--white); padding: 1.5rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
.hero-flag { width: 11rem; height: auto; }
.hero .tagline { color: var(--red); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.bunting { display: block; width: 100%; height: 34px; }
@media (max-width: 40rem) { .hero-body { grid-template-columns: 1fr; } .hero-flag { width: 8rem; } .hero h1 { font-size: 2.2rem; } }
@media (prefers-reduced-motion: no-preference) { .hero-flag .wave { animation: wave 4s ease-in-out infinite alternate; transform-origin: 8px 50%; } }
@keyframes wave { from { transform: skewY(0deg); } to { transform: skewY(-2deg); } }
.map { margin: 0; }
.map iframe { display: block; width: 100%; height: 300px; border: 1px solid var(--slate); }