html{overflow-x:clip}
.bg-aurora{height:140vh}
.bg-mesh{-webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent 97%);mask-image:linear-gradient(to bottom,#000 52%,transparent 97%)}
.stack{z-index:1}
.card-rows div[hidden]{display:none}
.card-rows div{display:grid;grid-template-columns:104px 1fr;gap:4px 14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;align-items:baseline}
.card-rows dd{color:var(--gray);text-align:left}
.cta-row{gap:26px;align-items:center;justify-content:space-between}
.map-box{background:var(--bg-soft)}
.city{align-items:flex-start;position:relative}
.city .code{font-weight:800;letter-spacing:.08em;font-size:14px;color:var(--blue-dark);background:var(--blue-soft);border-radius:8px;padding:6px 10px;min-width:58px;text-align:center;margin-top:2px}
.city.soon .code{color:var(--gray);background:var(--chip)}
.card-rows dd strong{color:var(--ink)}
.card-rows dd a{color:var(--blue-dark);text-decoration:none}
.card-rows dd a:hover{text-decoration:underline}
.xsec{position:relative}
.xcities .city.soon img{opacity:.45}
.xcities .status.collecting{background:#fdf3e3;color:#8a5a00}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:0;height:42px;width:42px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--char);margin:5px 0;border-radius:2px}
@media (max-width:876px){.nav-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center}}
@media (max-width:876px){header nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 38px rgba(7,60,110,.16);padding:10px;flex-direction:column;align-items:stretch}}
@media (max-width:876px){header nav.open{display:flex}}
@media (max-width:876px){header nav a:not(.btn){padding:8px 14px}}
@media (max-width:876px){header nav.open a:not(.btn){display:block}}
header nav a{white-space:nowrap}
#cityNav{margin-left:auto} /* keeps nav right once theme leaves it */
:root[data-theme="dark"] .wordmark img{content:url("../echode-logo-light.png")}
:root[data-theme="dark"] .status.collecting{background:#3d2f10;color:#f2c169}
@media (max-width:876px){:root[data-theme="dark"] header nav{background:#131e28}}
.nav-cta{display:flex;align-items:center;gap:14px}
@media (max-width:876px){.nav-cta .btn{flex:1}}

.status.collecting{background:#fdf3e3;color:#8a5a00}
.map-link:hover{opacity:.93}
#eventList{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:stretch}
#eventList:not(:empty){margin-top:2.2rem}
@media (max-width:876px){#eventList{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){#eventList{grid-template-columns:1fr}}

/* Theme parks next to the hamburger on mobile, not inside the menu. */
@media (max-width:876px){.theme-toggle{margin-left:auto}}
/* Hamburger animates to an X while the menu is open (flex-column spans sit
   12px center to center, so each line travels 6px to meet). */
.nav-toggle span{transition:transform .25s ease}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-6px) rotate(-45deg)}
@media (prefers-reduced-motion: reduce){.nav-toggle span{transition:none}}