:root,[data-theme="light"]{
--text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
--text-sm:clamp(.875rem,.8rem + .35vw,1rem);
--text-base:clamp(1rem,.95rem + .25vw,1.125rem);
--text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
--text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
--text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
--space-1:.25rem;
--space-2:.5rem;
--space-3:.75rem;
--space-4:1rem;
--space-5:1.25rem;
--space-6:1.5rem;
--space-8:2rem;
--space-10:2.5rem;
--space-12:3rem;
--space-16:4rem;
--color-bg:#f7f6f2;
--color-surface:#fbfbf9;
--color-surface-2:#f0ede8;
--color-border:#d4d1ca;
--color-divider:#ddd8d1;
--color-text:#28251d;
--color-text-muted:#6f6c66;
--color-text-inverse:#f9f8f4;
--color-primary:#01696f;
--color-primary-hover:#0c4e54;
--color-primary-highlight:#dbe9e7;
--color-info:#2876a9;
--color-warning:#a36b1f;
--color-danger:#9a2c59;
--radius-md:.85rem;
--radius-lg:1.25rem;
--radius-xl:1.6rem;
--shadow-sm:0 1px 2px rgba(26,24,20,.06);
--shadow-md:0 10px 28px rgba(26,24,20,.08);
--font-body:'Satoshi',system-ui,sans-serif;
--font-display:'Boska',Georgia,serif
}

[data-theme="dark"]{
--color-bg:#171614;
--color-surface:#1c1b19;
--color-surface-2:#242220;
--color-border:#393836;
--color-divider:#2b2a28;
--color-text:#e6e1d8;
--color-text-muted:#b4afa6;
--color-text-inverse:#151412;
--color-primary:#4f98a3;
--color-primary-hover:#76adb4;
--color-primary-highlight:#293436;
--color-info:#5d9dcb;
--color-warning:#d4a24d;
--color-danger:#cb628f;
--shadow-sm:0 1px 2px rgba(0,0,0,.24);
--shadow-md:0 10px 30px rgba(0,0,0,.34)
}

*,*:before,*:after{
box-sizing:border-box
}

html{
-webkit-text-size-adjust:none;
text-size-adjust:none;
scroll-behavior:smooth
}

body{
margin:0;
min-height:100vh;
font:var(--text-base)/1.6 var(--font-body);
color:var(--color-text);
background:linear-gradient(180deg,var(--color-bg),var(--color-surface-2) 100%)
}

a{
color:inherit;
text-decoration:none
}

img,svg,iframe{
display:block;
max-width:100%
}

button,input,select{
font:inherit;
color:inherit
}

.shell{
max-width:1280px;
margin:0 auto;
padding:0 var(--space-4)
}

.topbar-wrap{
position:sticky;
top:0;
z-index:1000;
background:color-mix(in srgb,var(--color-bg) 88%,transparent);
backdrop-filter:blur(10px);
border-bottom:1px solid color-mix(in srgb,var(--color-border) 70%,transparent)
}

.topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-4);
min-height:80px
}

.brand{
display:flex;
align-items:center;
gap:var(--space-3)
}

.logo{
width:44px;
height:44px;
border-radius:14px;
background:var(--color-surface);
border:1px solid color-mix(in srgb,var(--color-border) 85%,transparent);
padding:6px;
box-shadow:var(--shadow-sm);
object-fit:contain
}

.brand h1{
margin:0;
font:700 var(--text-lg)/1 var(--font-display)
}

.brand p{
margin:.2rem 0 0;
color:var(--color-text-muted);
font-size:var(--text-sm)
}

.theme-btn{
min-width:44px;
min-height:44px;
border-radius:999px;
border:1px solid color-mix(in srgb,var(--color-border) 85%,transparent);
background:var(--color-surface);
display:grid;
place-items:center;
box-shadow:var(--shadow-sm);
cursor:pointer
}

.page-main{
padding-top:var(--space-8);
padding-bottom:var(--space-12)
}

.hero-grid{
display:grid;
grid-template-columns:1.25fr .95fr;
gap:var(--space-6);
align-items:start
}

.hero-grid--single{
grid-template-columns:minmax(0,420px)
}

.filter-panel,.event-card,.map-card,.intro-card,.agenda-card,.alert-panel{
background:color-mix(in srgb,var(--color-surface) 94%,transparent);
border:1px solid color-mix(in srgb,var(--color-border) 88%,transparent);
border-radius:var(--radius-xl);
box-shadow:var(--shadow-md)
}

.filter-panel,.intro-card,.map-head,.alert-panel{
padding:var(--space-5)
}

.eyebrow{
display:inline-flex;
align-items:center;
padding:.45rem .8rem;
border-radius:999px;
background:var(--color-primary-highlight);
color:var(--color-primary);
font-size:var(--text-xs);
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em;
margin-bottom:var(--space-4)
}

.muted,.description{
color:var(--color-text-muted)
}

.filters,.event-head{
display:flex;
gap:var(--space-3)
}

.hero-actions{
margin-top:var(--space-6);
flex-wrap:wrap
}

.filters{
flex-direction:column
}

.field{
display:grid;
gap:.45rem
}

.field label{
font-size:var(--text-sm);
font-weight:700
}

.control{
width:100%;
min-height:48px;
padding:.85rem 1rem;
border-radius:14px;
border:1px solid color-mix(in srgb,var(--color-border) 88%,transparent);
background:var(--color-bg);
outline:none
}

.control:focus{
border-color:var(--color-primary);
box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary) 18%,transparent)
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:.75rem 1rem;
border-radius:999px;
border:1px solid transparent;
font-size:var(--text-sm);
font-weight:700;
cursor:pointer
}

.btn-primary{
background:var(--color-primary);
color:var(--color-text-inverse)
}

.btn-primary:hover{
background:var(--color-primary-hover)
}

.btn-secondary{
background:var(--color-surface);
border-color:color-mix(in srgb,var(--color-border) 88%,transparent)
}

.btn-info,.pocket-btn{
background:var(--color-info);
color:#fff
}

.btn-warning{
background:var(--color-warning);
border-color:transparent;
color:#1f1403
}

.results-grid{
display:grid;
grid-template-columns:minmax(0,1.15fr) 360px;
gap:var(--space-6);
margin-top:var(--space-6)
}

.section-head{
display:flex;
justify-content:space-between;
align-items:end;
gap:var(--space-4);
margin-bottom:var(--space-4)
}

.section-head h3,.filter-panel h3,.map-head h3,.intro-card h3{
margin:0 0 var(--space-2);
font-size:var(--text-lg)
}

.cards-grid{
display:grid;
gap:var(--space-4)
}

.event-card{
padding:var(--space-5);
position:relative
}

.event-head{
justify-content:space-between;
align-items:start
}

.source{
margin-bottom:.35rem;
color:var(--color-primary);
font-size:var(--text-sm);
font-weight:700
}

.event-card h4{
margin:0;
font-size:1.08rem;
line-height:1.3
}

.distance-pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding:.5rem .75rem;
border-radius:999px;
background:var(--color-primary-highlight);
color:var(--color-primary);
font-size:var(--text-xs);
font-weight:700;
white-space:nowrap
}

.anchor{
position:absolute;
top:-100px
}

.map-card{
overflow:hidden;
position:sticky;
top:104px
}

.map-head{
border-bottom:1px solid var(--color-divider)
}

#map{
width:100%;
height:560px
}

.resume-row{
display:flex;
justify-content:center;
margin-top:var(--space-6)
}

#resume{
width:100%;
min-height:70vh;
border:0;
border-radius:var(--radius-md)
}

.expand-link{
text-align:center;
margin:var(--space-6) 0 0
}

.expand-link a{
color:var(--color-primary);
font-weight:700
}

.alert-panel{
margin-top:var(--space-6)
}

.alert-error{
background:color-mix(in srgb,var(--color-danger) 18%,var(--color-surface));
color:var(--color-text)
}

.welcome-section{
display:grid;
gap:var(--space-6)
}

.agenda-logos{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:var(--space-4)
}

.agenda-card{
min-height:150px;
padding:var(--space-4);
display:grid;
place-items:center
}

.agenda-card img{
max-height:90px;
width:100%
}

@media (max-width:980px){
.hero-grid,.results-grid{
grid-template-columns:1fr
}

.map-card{
position:static
}

#map{
height:380px
}


}

@media (max-width:680px){
.shell{
padding:0 var(--space-3)
}

.topbar{
align-items:start;
padding:var(--space-3) 0
}

.results-grid{
display:flex;
flex-direction:column
}

.map-panel{
order:-1
}

.section-head,.event-head{
flex-direction:column;
align-items:start
}

.btn{
width:100%
}


}


.control::placeholder{
color:var(--color-text-muted);
opacity:.8
}

.date {
  white-space: nowrap;
}

.dsioEl-header__date--day {
  display: inline;
}
