.city-photo{display:block;width:100%;height:100%;overflow:hidden}
.civic-skyline{width:310px;height:45px;max-width:80%;margin-bottom:20px;mix-blend-mode:multiply}
.style-option.civic .miniature{background:#f6f5ee;border-radius:12px;grid-template-columns:1fr 1fr;gap:8px}
.style-option.civic .miniature b{color:#24462a;font-size:21px;letter-spacing:-1px;z-index:2}
.style-option.civic .miniature .city-photo{border-radius:10px;min-width:0}
.style-option.civic .miniature:after{background:#4b873e;border-radius:100%;width:20px;height:20px;left:14px;bottom:14px}
body[data-theme=civic]{--bg:#f7f6f0;--surface:#fff;--ink:#16321d;--muted:#586854;--line:#dbe2d4;--accent:#437d35;--on-accent:#fff;--soft:#eaf0e0;--radius:24px;--heading:'Manrope',sans-serif}
body[data-theme=civic] .topline{background:#eaf0e0;color:#385534;letter-spacing:1px}
body[data-theme=civic] .header{background:#fbfbf5eF;border-bottom:1px solid #dbe2d4}
body[data-theme=civic] .hero{background:#f7f6f0;color:#16321d;min-height:580px}
body[data-theme=civic] .hero-inner{min-height:580px;grid-template-columns:1.05fr 1fr;gap:40px}
body[data-theme=civic] .hero-copy{padding:48px 0 75px;max-width:650px}
body[data-theme=civic] .hero .eyebrow{color:#5c7656;font-size:10px;margin-bottom:16px}
body[data-theme=civic] .hero h1{font-size:clamp(56px,6.1vw,88px);font-weight:800;letter-spacing:-4px;line-height:1.05}
body[data-theme=civic] .hero h1 em{color:#437d35}
body[data-theme=civic] .hero p{color:#586854;max-width:400px;margin:22px 0 27px}
body[data-theme=civic] .hero .text-link{color:#315c2c}
body[data-theme=civic] .hero-image{top:40px;bottom:40px;right:max(48px,calc((100vw - 1280px)/2));width:44%;background:none;border-radius:28px;overflow:hidden;box-shadow:0 20px 45px #23351c20}
body[data-theme=civic] .hero-image:after{background:linear-gradient(0deg,#142813cc,transparent 65%)}
body[data-theme=civic] .hero-image .city-photo{object-fit:cover}
body[data-theme=civic] .hero-side{display:none}
body[data-theme=civic] .hero-index{display:none}
body[data-theme=civic] .hero-sticker{background:#eef2df;color:#335c2b;border:6px solid #fff;right:70px;top:18px;transform:rotate(8deg);width:100px;height:100px;box-shadow:0 6px 20px #29482015}
body[data-theme=civic] .hero-caption{right:max(75px,calc((100vw - 1220px)/2));bottom:70px;max-width:36%;text-align:left}
body[data-theme=civic] .hero-caption button{font-size:23px;line-height:1.25}
body[data-theme=civic] .hero-caption span{font-size:9px;letter-spacing:1px}
body[data-theme=civic] .marquee{background:#edf1e4;color:#365b2f;border-top:1px solid #dae2d0;border-bottom:1px solid #dae2d0;font-size:10px;padding:15px 0}
body[data-theme=civic] .button{border-radius:30px}
body[data-theme=civic] .search-bar{border:1px solid #fff;box-shadow:0 10px 30px #29482010;border-radius:18px;padding:15px}
body[data-theme=civic] .search-bar .button{border-radius:12px}
body[data-theme=civic] .section h2{color:#1e3b23;font-size:37px;letter-spacing:-1.3px}
body[data-theme=civic] .section-kicker{color:#64805a}
body[data-theme=civic] .category{background:#fff;border-color:#dbe2d4}
body[data-theme=civic] .category.active{background:#437d35;color:#fff;border-color:#437d35}
body[data-theme=civic] .events-grid:not(.list-view){grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
body[data-theme=civic] .event-card{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 10px 24px #24391b0c;border:1px solid #eef0e7}
body[data-theme=civic] .event-image{border-radius:23px 23px 0 0;aspect-ratio:1.5}
body[data-theme=civic] .event-info{padding:21px 23px 24px}
body[data-theme=civic] .event-title{font-size:22px;letter-spacing:-.7px}
body[data-theme=civic] .date-badge{border-radius:10px;background:#fffff5;color:#35552d;box-shadow:0 3px 10px #0001}
body[data-theme=civic] .category-tag{background:#fff;color:#35552d;border-radius:30px}
body[data-theme=civic] .favorite{color:#437d35}
body[data-theme=civic] .favorite[aria-pressed=true]{color:#fff}
body[data-theme=civic] .list-view .event-card{border:0;border-bottom:1px solid #dbe2d4;border-radius:0;box-shadow:none;background:none}
body[data-theme=civic] .list-view .event-image{border-radius:15px}
body[data-theme=civic] .list-view .event-info{padding:5px 0}
body[data-theme=civic] .explore-grid{grid-template-columns:repeat(3,1fr);gap:24px}
body[data-theme=civic] .explore-card{border:3px solid #fff;border-radius:25px;box-shadow:0 10px 25px #24391b18;min-height:350px}
body[data-theme=civic] .explore-arrow{background:#4e873d;border-color:#4e873d}
body[data-theme=civic] .city-card{background:#e9eedf;color:#294724;border-radius:28px;box-shadow:0 10px 35px #2948200b;border:2px solid #fff}
body[data-theme=civic] .city-card h2{font-size:38px}
body[data-theme=civic] .membership-card{background:#346b33;color:#f6faeb;border:1px solid #73a262;transform:rotate(-7deg);box-shadow:0 25px 35px #223c2220}
body[data-theme=civic] .membership-card .card-star{color:#b5ce9c}
body[data-theme=civic] .card-visual{background:radial-gradient(circle,#d2dfbd,transparent 72%)}
body[data-theme=civic] .points-chip{background:#fffff8;color:#355c2b}
body[data-theme=civic] .service{border:1px solid #fff;box-shadow:0 7px 20px #2948200a;border-radius:18px;background:#fff}
body[data-theme=civic] .organizer-banner{border-color:#becbb3}
body[data-theme=civic] .footer{background:#1f3c25;--accent:#bed5a1}
@media(max-width:1100px){
 body[data-theme=civic] .hero h1{font-size:70px}
 body[data-theme=civic] .hero-image{right:30px;width:43%}
 body[data-theme=civic] .hero-caption{right:50px;max-width:33%}
 body[data-theme=civic] .hero-caption button{font-size:20px}
 body[data-theme=civic] .hero-sticker{right:40px}
 body[data-theme=civic] .event-info{padding:18px}
}
@media(max-width:900px){
 body[data-theme=civic] .hero-inner{gap:20px}
 body[data-theme=civic] .hero h1{font-size:59px;letter-spacing:-3px}
 body[data-theme=civic] .hero p{font-size:14px;max-width:310px}
 body[data-theme=civic] .hero .text-link{display:inline-flex;margin:16px 0 0}
 body[data-theme=civic] .hero .button{display:flex;width:max-content}
 body[data-theme=civic] .hero-caption button{font-size:18px}
 body[data-theme=civic] .hero-caption span{font-size:8px}
 body[data-theme=civic] .events-grid:not(.list-view){grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
 body[data-theme=civic] .explore-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
 .style-option.civic .miniature b{font-size:17px}
 .civic-skyline{width:240px;height:35px;margin-bottom:19px}
 body[data-theme=civic] .hero,body[data-theme=civic] .hero-inner{min-height:845px}
 body[data-theme=civic] .hero-inner{display:block}
 body[data-theme=civic] .hero-copy{padding:30px 0 360px}
 body[data-theme=civic] .hero .eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:17px}
 body[data-theme=civic] .hero h1{font-size:57px;letter-spacing:-3.2px}
 body[data-theme=civic] .hero p{font-size:13px;max-width:295px;margin:20px 0 23px}
 body[data-theme=civic] .hero .button{display:inline-flex}
 body[data-theme=civic] .hero .text-link{display:inline-flex;margin:0 0 0 12px}
 body[data-theme=civic] .hero-image{top:auto;bottom:26px;left:20px;right:20px;width:auto;height:310px;border-radius:22px}
 body[data-theme=civic] .hero-sticker{top:auto;bottom:275px;right:30px;width:76px;height:76px;border-width:4px}
 body[data-theme=civic] .hero-caption{left:40px;right:40px;bottom:50px;max-width:none}
 body[data-theme=civic] .hero-caption button{font-size:21px}
 body[data-theme=civic] .hero-caption span{font-size:8px}
 body[data-theme=civic] .search-bar{border-radius:14px;padding:9px}
 body[data-theme=civic] .section h2{font-size:30px}
 body[data-theme=civic] .events-grid:not(.list-view){grid-template-columns:1fr;gap:24px}
 body[data-theme=civic] .event-info{padding:18px 20px 22px}
 body[data-theme=civic] .event-title{font-size:23px}
 body[data-theme=civic] .list-view .event-title{font-size:17px}
 body[data-theme=civic] .explore-grid{grid-template-columns:1fr;gap:16px}
 body[data-theme=civic] .explore-card{min-height:260px}
 body[data-theme=civic] .city-card{border-radius:23px}
 body[data-theme=civic] .city-card h2{font-size:31px}
}
@media(max-width:360px){body[data-theme=civic] .hero h1{font-size:50px}body[data-theme=civic] .hero .text-link{margin:14px 0 0}}