/* DESKTOP · 768px+ · wider editorial / dashboard layout */
:root{--desktop-side:246px}
html,body{min-width:0;max-width:100%;overflow-x:clip}
body{background:radial-gradient(ellipse at 75% 6%,#c3471225,transparent 50%),radial-gradient(ellipse at 7% 88%,#60341b29,transparent 46%),#09090b}
.app{max-width:none;width:100%;min-height:100dvh;padding:0}
.topbar{position:sticky;top:0;z-index:30;min-height:88px;padding:17px clamp(28px,4vw,74px);background:#0e0c10ed;backdrop-filter:blur(18px)}
.brandmark{width:48px;height:48px}.brandname{font-size:29px}.brandline{font-size:10px}.iconbutton{width:46px;height:46px}
.nav{position:fixed;top:110px;bottom:auto;left:clamp(16px,3vw,48px);transform:none;width:calc(var(--desktop-side) - 32px);height:auto;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:18px 11px;border:1px solid #b673444f;border-radius:25px;background:linear-gradient(160deg,#261a18e8,#131217ed);box-shadow:0 20px 55px #0008;backdrop-filter:blur(16px)}
.navbtn{width:100%;min-height:60px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:15px;text-align:left;padding:12px 15px;font-size:13px;border-radius:15px;transition:background .2s,transform .2s;color:#d0bdb1}
.navbtn svg{height:23px;width:23px;flex:none}
.navbtn.active{background:linear-gradient(115deg,#a7482650,#ff9a2921);color:#ffc17b;border:1px solid #e17a3450;box-shadow:inset 0 1px #ffce9c18}
.navbtn:not(.active):hover{background:#ffffff0b;transform:translateX(3px)}
main{width:calc(100% - var(--desktop-side) - 52px);max-width:1540px;margin-left:calc(var(--desktop-side) + 12px);margin-right:40px}
.page{padding:clamp(25px,4vw,56px) clamp(16px,3.5vw,54px) 55px;min-width:0}
.hero{min-height:clamp(470px,62vh,700px);padding:clamp(34px,5vw,74px);border-radius:38px}
.hero h1{font-size:clamp(66px,7vw,115px);line-height:.91;max-width:950px;margin:24px 0 22px}
.hero p{font-size:15px;max-width:530px}.hero .primary{width:auto;padding:18px 27px;align-self:flex-start;font-size:14px}
.hero::after{width:330px;height:330px;right:5%;top:-115px}
.section{margin-top:50px}.secthead h2,.pagetitle{font-size:clamp(43px,4.1vw,63px)}
.featuregrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.feature{min-height:190px;padding:25px 20px;gap:12px;border-radius:24px}.feature svg{height:32px;width:32px}.feature strong{font-size:28px}.feature small{font-size:12px}
.banner{padding:25px 30px;max-width:100%;border-radius:24px}.banner strong{font-size:30px}.banner p{font-size:13px}
.footer{margin-top:65px}.pageintro{font-size:15px}.chips{padding-bottom:18px}
.eventlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.event{padding:20px;grid-template-columns:95px minmax(0,1fr);min-height:146px;border-radius:25px}.datebox{min-height:99px}.event strong{font-size:29px}.event p{font-size:12px}.tag{font-size:10px}
.photogrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.photo{min-height:200px;border-radius:25px}.photo span{font-size:29px}
.form{max-width:780px;grid-template-columns:repeat(2,minmax(0,1fr));gap:21px}.field:has(textarea),.form .notice,.form .primary{grid-column:1/-1}.form .primary{width:fit-content;padding:17px 30px}.form .field input,.form .field select,.form .field textarea{border-radius:17px}
.toast{bottom:28px;left:auto;right:24px;transform:translateY(12px);width:min(420px,calc(100% - 48px))}.toast.show{transform:translateY(0)}
@media(min-width:768px) and (max-width:1100px){:root{--desktop-side:205px}.nav{width:180px;left:16px}.navbtn{font-size:12px}.page{padding-inline:20px}main{margin-right:10px;width:calc(100% - 225px)}.featuregrid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero h1{font-size:clamp(56px,7vw,80px)}.photogrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.navbtn{transition:none!important}}

/* v4 · event card typography: no inline title beside category */
.event[hidden]{display:none!important}
.event > div:last-child{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.event .tag{display:block;margin:0;line-height:1.4}
.event strong{display:block;line-height:1.12;overflow-wrap:anywhere}
.event p{margin:0;line-height:1.55}
@media(min-width:768px) and (max-width:1250px){.event{grid-template-columns:78px minmax(0,1fr);gap:13px;padding:15px}.event strong{font-size:clamp(22px,2.6vw,28px)}}