:root{--navy:#09243b;--navy2:#113a59;--blue:#0879b7;--lake:#12a0c7;--green:#236b55;--gold:#f2b84b;--cream:#f5f3ed;--white:#fff;--ink:#14212b;--muted:#60707c;--line:#dbe3e8;--shadow:0 18px 45px rgba(9,36,59,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.6}img{display:block;width:100%;max-width:100%}a{color:var(--blue);text-underline-offset:3px}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.7rem 1rem;z-index:100}
.topbar{display:flex;justify-content:space-between;gap:1rem;padding:.45rem max(1rem,calc((100vw - 1200px)/2));background:#061a2b;color:#dbe9f2;font-size:.82rem}.topbar a{color:#fff;font-weight:700;text-decoration:none}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1rem max(1.25rem,calc((100vw - 1200px)/2));background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--navy);text-decoration:none}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;font-weight:900}.brand strong,.brand small{display:block}.brand strong{font-size:1.12rem;line-height:1.1}.brand small{font-size:.72rem;color:var(--muted);margin-top:.18rem}.site-nav{display:flex;align-items:center;gap:1.25rem}.site-nav a{color:var(--navy);font-size:.92rem;font-weight:750;text-decoration:none}.site-nav .nav-cta{padding:.6rem .95rem;border-radius:999px;background:var(--navy);color:#fff}.nav-toggle{display:none;border:0;background:var(--navy);color:#fff;border-radius:8px;padding:.55rem .8rem;font-weight:700}
.hero,.page-hero{color:#fff;background:radial-gradient(circle at 85% 15%,rgba(18,160,199,.38),transparent 28rem),linear-gradient(125deg,#071e32,#0d446b 62%,#176950);}.hero{padding:clamp(4rem,8vw,7.5rem) 1.25rem}.hero-inner,.page-hero>div{max-width:1200px;margin:auto}.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr);gap:clamp(2rem,6vw,5rem);align-items:center}.hero h1,.page-hero h1{font-size:clamp(3.2rem,8vw,6.5rem);line-height:.92;letter-spacing:-.065em;margin:.15rem 0 1.5rem}.page-hero{padding:5.5rem 1.25rem}.page-hero h1{max-width:900px;font-size:clamp(2.7rem,6vw,5rem)}.hero-copy,.page-hero p{max-width:760px;font-size:clamp(1.05rem,2vw,1.3rem);color:#dceaf1}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.73rem;font-weight:900;color:var(--gold);margin:0 0 .6rem}.eyebrow.dark{color:var(--green)}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}.btn,.button{display:inline-flex;align-items:center;justify-content:center;padding:.82rem 1.15rem;border:1px solid transparent;border-radius:9px;background:var(--blue);color:#fff;font-weight:800;text-decoration:none;transition:.18s}.btn:hover,.button:hover{transform:translateY(-2px);background:#05689d}.btn.secondary,.button.secondary{background:transparent;border-color:rgba(255,255,255,.55)}.button.secondary{color:var(--navy);border-color:var(--line)}.btn.light{background:#fff;color:var(--navy)}.trust-row{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:2rem;color:#d8e7ee;font-size:.9rem}.trust-row span:before{content:"✓";margin-right:.4rem;color:var(--gold);font-weight:900}.hero-panel{padding:2rem;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:rgba(4,24,39,.46);box-shadow:var(--shadow)}.hero-panel h2{font-size:1.75rem;line-height:1.15;margin:.8rem 0}.hero-panel a{color:#fff;font-weight:800}.live-dot{font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.live-dot:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4c4c;margin-right:.5rem;box-shadow:0 0 0 5px rgba(239,76,76,.18)}
.quick-links{max-width:1200px;margin:-2rem auto 0;position:relative;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.quick-links a{padding:1.35rem 1.5rem;text-decoration:none;border-right:1px solid var(--line)}.quick-links a:last-child{border:0}.quick-links strong,.quick-links span{display:block}.quick-links strong{color:var(--navy);font-size:1.05rem}.quick-links span{color:var(--muted);font-size:.82rem;margin-top:.25rem}
.section{max-width:1200px;margin:auto;padding:4.5rem 1.25rem}.flush-top{padding-top:.25rem}.section-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;padding-bottom:1.6rem}.section-head h2,.section h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.04;letter-spacing:-.04em;margin:.15rem 0}.section-head>a,.text-link{font-weight:800;text-decoration:none}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}.media-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 7px 25px rgba(9,36,59,.07)}.card-image{position:relative;aspect-ratio:16/9;background:#e8eff2;overflow:hidden}.card-image img{height:100%;object-fit:cover}.pill{position:absolute;left:1rem;top:1rem;padding:.35rem .65rem;border-radius:999px;background:#fff;color:var(--navy);font-size:.69rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.pill.live{background:#d94343;color:#fff}.card-body{padding:1.3rem}.card-body h3{font-size:1.3rem;line-height:1.2;margin:0 0 .6rem}.card-body p{color:var(--muted);margin:0 0 1rem}.card-body a{font-weight:800;text-decoration:none}
.empty-state{grid-column:1/-1;padding:3rem;border:1px dashed #afbdc6;border-radius:16px;background:#f8fafb;text-align:center}.empty-state h2,.empty-state h3{margin-top:0}.band{display:flex;justify-content:space-between;align-items:center;gap:3rem;padding:4.5rem max(1.25rem,calc((100vw - 1200px)/2));background:var(--navy);color:#fff}.band h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1;letter-spacing:-.04em;max-width:780px;margin:.4rem 0 1rem}.band p{color:#d8e4eb;max-width:760px}.band-actions{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}.band-actions>a:not(.btn){color:#fff;font-weight:800}
.split-section{display:grid;grid-template-columns:1.3fr .7fr;gap:3rem;align-items:start}.schedule-list{border-top:1px solid var(--line)}.schedule-list>a{display:grid;grid-template-columns:88px 1fr auto;gap:1rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}.schedule-list time{color:var(--green);font-weight:900}.schedule-list small,.schedule-list em{display:block;color:var(--muted);font-size:.82rem;font-style:normal}.schedule-list.large>a{padding:1.4rem}.empty-inline{padding:1.4rem 0;display:flex;flex-direction:column;color:var(--muted)}.cta-card{padding:2.2rem;border-radius:18px;background:var(--cream)}.cta-card h2{font-size:2rem!important}.newsletter{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:3rem max(1.25rem,calc((100vw - 1200px)/2));background:#0d5b72;color:#fff}.newsletter h2{margin:.2rem 0;font-size:2rem}.newsletter p{margin:.2rem 0;color:#dcecf0}
.intro-grid,.form-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}.price-card{padding:2rem;border:1px solid var(--line);border-radius:18px}.price-card.featured{border:2px solid var(--blue);box-shadow:var(--shadow)}.price-card>span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900;color:var(--green)}.price-card h3{font-size:1.5rem;margin:.4rem 0}.price{font-size:2.4rem;font-weight:900;color:var(--navy)}.price small{font-size:.85rem;color:var(--muted)}.price-card ul{padding-left:1.2rem;color:var(--muted);min-height:9rem}.fine-print{color:var(--muted);font-size:.82rem;margin-top:1rem}.form{display:grid;gap:.55rem}.panel{padding:1.8rem;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 12px 35px rgba(9,36,59,.07)}.form label{font-weight:800;font-size:.87rem}.form input,.form select,.form textarea{width:100%;padding:.82rem;border:1px solid #bbc7cf;border-radius:8px;font:inherit}.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid rgba(8,121,183,.18);border-color:var(--blue)}.honeypot{position:absolute;left:-9999px}.alert{padding:1rem;border-radius:8px;margin-bottom:1rem}.alert.success{background:#e7f5ee;color:#185b43}.alert.error{background:#fdeaea;color:#8c2525}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.check-grid span{padding:.8rem;border-radius:8px;background:#f2f6f7}.check-grid span:before{content:"✓";color:var(--green);font-weight:900;margin-right:.45rem}.prose{max-width:800px}.prose p{font-size:1.08rem;color:#42525e}
.site-footer{padding:3.5rem max(1.25rem,calc((100vw - 1200px)/2)) 1.5rem;background:#061a2b;color:#c8d8e1}.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:3rem}.footer-grid div{display:flex;flex-direction:column;gap:.55rem}.footer-grid a{color:#dce8ee;text-decoration:none;font-size:.9rem}.footer-grid strong,.footer-brand{color:#fff!important;font-weight:900;font-size:1rem}.footer-brand{font-size:1.5rem!important}.footer-grid p{max-width:380px}.footer-bottom{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);font-size:.78rem}.footer-bottom a{color:#c8d8e1}
@media(max-width:900px){.site-nav{display:none;position:absolute;left:0;right:0;top:100%;padding:1rem 1.25rem;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}.site-nav.open{display:flex}.nav-toggle{display:block}.hero-grid,.split-section,.intro-grid,.form-layout{grid-template-columns:1fr}.quick-links{margin:0;border-radius:0;grid-template-columns:1fr 1fr}.card-grid,.pricing-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.band,.newsletter{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.topbar span{display:none}.topbar{justify-content:center}.site-header{padding:.8rem 1rem}.brand small{display:none}.hero{padding:4rem 1.1rem}.hero h1{font-size:3.6rem}.page-hero{padding:4rem 1.1rem}.quick-links,.card-grid,.pricing-grid,.footer-grid,.check-grid{grid-template-columns:1fr}.quick-links a{border-right:0;border-bottom:1px solid var(--line)}.section{padding:3.2rem 1.1rem}.section-head{align-items:flex-start;flex-direction:column}.schedule-list>a{grid-template-columns:70px 1fr}.schedule-list>a b{display:none}.footer-bottom{flex-direction:column}}
/* 2026 broadcast homepage redesign */
:root{--broadcast-navy:#071829;--broadcast-blue:#0c3f86;--broadcast-red:#c8261b;--broadcast-line:#d9e0e7}
.broadcast-header{position:sticky;top:0;z-index:60;background:linear-gradient(90deg,#061625,#0a2238);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.28)}
.broadcast-header-inner{max-width:1536px;margin:auto;min-height:70px;padding:0 1.8rem;display:flex;align-items:center;gap:2rem}
.broadcast-brand{flex:0 0 auto;color:#fff;text-decoration:none;line-height:1}
.broadcast-brand-main{display:block;font-size:1.72rem;font-weight:950;letter-spacing:-.04em}
.broadcast-brand-main span{display:inline-block;margin-left:.18rem;padding:.17rem .28rem;border-radius:4px;background:#236bc2}
.broadcast-brand small{display:block;margin-top:.2rem;font-size:.72rem;font-weight:700;color:#dbe7f1}
.broadcast-nav{display:flex;align-items:center;gap:1.5rem;margin-left:auto}
.broadcast-nav a{color:#fff;text-decoration:none;text-transform:uppercase;font-size:.82rem;font-weight:850;letter-spacing:.02em}
.broadcast-nav a:hover{color:#83bdf1}
.watch-live-button,.red-button{display:inline-flex;align-items:center;gap:.55rem;background:var(--broadcast-red);color:#fff;text-decoration:none;text-transform:uppercase;font-weight:900;border-radius:4px}
.watch-live-button{padding:.85rem 1.05rem;white-space:nowrap}
.broadcast-hero{min-height:368px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 435px;align-items:stretch;background:
linear-gradient(90deg,rgba(2,12,20,.80) 0%,rgba(2,12,20,.36) 48%,rgba(2,12,20,.05) 72%),
url('../img/michigan/hero-lighthouse.jpg') center/cover no-repeat;color:#fff}
.broadcast-hero-copy{padding:4.25rem clamp(1.8rem,4vw,4rem);max-width:790px}
.broadcast-kicker{margin:0 0 .8rem;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:900;color:#9fd0ff}
.broadcast-hero h1{margin:0;font-size:clamp(3rem,5.3vw,5rem);line-height:.95;letter-spacing:-.04em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.broadcast-hero-copy>p:not(.broadcast-kicker){max-width:620px;font-size:1.16rem;line-height:1.5;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.red-button{padding:.85rem 1.2rem;margin-top:.55rem}
.live-now-panel{margin:10px 18px 0 0;padding:1.25rem 1.35rem;background:rgba(5,24,40,.93);border-radius:5px 5px 0 0;align-self:end;min-height:358px}
.live-now-panel h2{margin:0 0 .65rem;text-transform:uppercase;font-size:1.05rem}
.live-now-panel h2 span{display:inline-block;width:10px;height:10px;margin-right:.45rem;border-radius:50%;background:#e42c21}
.live-now-list a{position:relative;display:grid;grid-template-columns:100px 1fr;gap:.75rem;align-items:center;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none}
.live-now-list img{height:54px;object-fit:cover}
.live-now-list strong,.live-now-list small{display:block}
.live-now-list strong{font-size:.9rem;line-height:1.15}
.live-now-list small{font-size:.72rem;color:#cbd7e2;margin-top:.24rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.live-now-list b{position:absolute;left:0;bottom:.55rem;padding:.1rem .3rem;background:#d82c20;font-size:.62rem}
.panel-link{display:block;margin-top:.55rem;text-align:right;color:#fff;text-decoration:none;text-transform:uppercase;font-size:.7rem;font-weight:900}
.news-dashboard{display:grid;grid-template-columns:1.1fr 1.05fr 1.45fr 1.2fr;max-width:1536px;margin:auto;border-bottom:1px solid var(--broadcast-line);background:#fff}
.dashboard-column{min-width:0;padding:1rem 1.8rem;border-right:1px solid var(--broadcast-line)}
.dashboard-column:last-child{border-right:0}
.dashboard-heading h2,.section-title-row h2{margin:0 0 .75rem;color:#123f82;text-transform:uppercase;font-size:1rem;line-height:1.1}
.compact-story{display:grid;grid-template-columns:102px 1fr;gap:.75rem;margin-bottom:.7rem}
.compact-story img{height:72px;object-fit:cover;border-radius:2px}
.compact-story span{font-size:.64rem;text-transform:uppercase;font-weight:900;color:#c3261c}
.compact-story h3{margin:.05rem 0;font-size:.86rem;line-height:1.15}
.compact-story a{font-size:.68rem;text-decoration:none;font-weight:800}
.event-row{display:grid;grid-template-columns:48px 1fr;gap:.75rem;align-items:center;padding:.62rem 0;border-bottom:1px solid var(--broadcast-line);color:var(--ink);text-decoration:none}
.event-row time{display:grid;place-items:center;background:#f1f3f5;line-height:1}
.event-row time b{font-size:.62rem;color:#ce251b;margin-top:.35rem}
.event-row time strong{font-size:1.35rem;margin:.15rem 0 .35rem}
.event-row span strong,.event-row span small{display:block}
.event-row span strong{font-size:.86rem}.event-row span small{font-size:.72rem;color:var(--muted)}
.featured-video{position:relative;display:block}.featured-video img{height:150px;object-fit:cover}.play-button{position:absolute;left:1rem;bottom:1rem;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.82);color:#fff}
.ondemand-column h3,.weather-column h3{margin:.55rem 0 .15rem;font-size:.95rem}.ondemand-column p,.weather-column p{margin:.1rem 0 .8rem;font-size:.8rem;line-height:1.35}
.weather-image{height:150px;object-fit:cover}
.dashboard-link{display:block;margin-top:.55rem;padding-top:.45rem;border-top:1px solid var(--broadcast-line);text-transform:uppercase;text-decoration:none;font-size:.69rem;font-weight:900;color:#143e82}
.lower-dashboard{display:grid;grid-template-columns:1.1fr 1.35fr .8fr;gap:1rem;max-width:1536px;margin:auto;padding:.75rem 1.8rem 1rem;background:#f4f5f7}
.business-spotlight,.explore-michigan,.sponsor-card{background:#fff;padding:.8rem}
.section-title-row{display:flex;align-items:center;justify-content:space-between}.section-title-row span{background:#cc2a20;color:#fff;text-transform:uppercase;font-size:.62rem;font-weight:900;padding:.22rem .4rem}
.spotlight-grid{display:grid;grid-template-columns:52% 1fr;gap:.8rem}.spotlight-grid img{height:155px;object-fit:cover}.spotlight-grid h3{margin:.15rem 0;font-size:1rem}.spotlight-grid p{font-size:.8rem;line-height:1.45}
.blue-button{display:inline-flex;padding:.55rem .8rem;border-radius:3px;background:#154889;color:#fff;text-decoration:none;text-transform:uppercase;font-size:.7rem;font-weight:900}
.region-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}.region-grid a{position:relative;display:block;color:#fff;text-decoration:none}.region-grid img{height:155px;object-fit:cover}.region-grid span{position:absolute;inset:auto 0 0;padding:.45rem;background:linear-gradient(transparent,rgba(0,0,0,.8));font-size:.72rem;font-weight:800}
.sponsor-card{background:linear-gradient(145deg,#fff,#e8ecf1)}.sponsor-card h2{margin:0;color:#123f82;text-transform:uppercase;font-size:1rem}.sponsor-card p{font-size:.85rem}.sponsor-card strong{display:block;margin-top:1.5rem;color:#173e70;text-transform:uppercase;font-size:1rem}
.broadcast-strip{display:flex;justify-content:center;gap:2.4rem;padding:.75rem;background:#071829}.broadcast-strip a{color:#fff;text-decoration:none;text-transform:uppercase;font-size:.72rem;font-weight:800}
@media(max-width:1180px){
.broadcast-nav{gap:.85rem}.broadcast-nav a{font-size:.72rem}.news-dashboard{grid-template-columns:1fr 1fr}.dashboard-column:nth-child(2){border-right:0}.lower-dashboard{grid-template-columns:1fr 1fr}.sponsor-card{grid-column:1/-1}
}
@media(max-width:860px){
.broadcast-header-inner{padding:.65rem 1rem}.broadcast-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;padding:1rem;background:#071829}.broadcast-nav.open{display:flex}.nav-toggle{display:block;margin-left:auto}.watch-live-button{display:none}
.broadcast-hero{grid-template-columns:1fr}.broadcast-hero-copy{padding:4rem 1.25rem 3rem}.live-now-panel{margin:0;border-radius:0;min-height:0}.news-dashboard{grid-template-columns:1fr}.dashboard-column{border-right:0;border-bottom:1px solid var(--broadcast-line)}.lower-dashboard{grid-template-columns:1fr}.sponsor-card{grid-column:auto}.broadcast-strip{flex-wrap:wrap;gap:.8rem 1.4rem}
}
@media(max-width:560px){
.broadcast-brand-main{font-size:1.32rem}.broadcast-brand small{font-size:.6rem}.broadcast-hero h1{font-size:2.75rem}.dashboard-column,.lower-dashboard{padding-left:1rem;padding-right:1rem}.spotlight-grid{grid-template-columns:1fr}.region-grid{grid-template-columns:1fr 1fr}
}
/* Broadcast design system: interior pages */
.page-hero,.inner-hero{position:relative;isolation:isolate;min-height:330px;display:flex;align-items:end;background:#071829 center/cover no-repeat;color:#fff}
.page-hero:before,.inner-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(2,12,20,.92) 0%,rgba(2,12,20,.63) 48%,rgba(2,12,20,.2) 100%)}
.page-hero>div,.inner-hero-overlay{width:min(100%,1536px);margin:0 auto;padding:4.6rem clamp(1.25rem,4vw,4rem) 3.2rem}
.page-hero h1,.inner-hero h1{max-width:900px;margin:.2rem 0 .8rem;font-size:clamp(2.8rem,5.5vw,5.4rem);line-height:.94;letter-spacing:-.045em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.page-hero p,.inner-hero p{max-width:760px;margin:.25rem 0;color:#e5edf4;font-size:1.08rem}
.hero-business{background-image:url('../img/michigan/business-cider-mill.jpg')}
.hero-community{background-image:url('../img/michigan/story-festival.jpg')}
.hero-contact,.hero-submit{background-image:url('../img/michigan/metro-detroit.jpg')}
.hero-live{background-image:url('../img/michigan/detroit-skyline.jpg')}
.hero-events,.hero-guide{background-image:url('../img/michigan/west-michigan.jpg')}
.hero-advertise{background-image:url('../img/michigan/story-manufacturing.jpg')}
.hero-about{background-image:url('../img/michigan/upper-peninsula.jpg')}
.hero-recorded{background-image:url('../img/michigan/northern-michigan.jpg')}
.compact-inner{min-height:260px}
.broadcast-page{width:min(100%,1536px);margin:auto;padding:2rem clamp(1rem,3vw,2rem) 4rem;background:#fff}
.narrow-page{max-width:980px}
.page-title-row{padding:.5rem 0 1.2rem;border-bottom:2px solid #123f82;margin-bottom:1.25rem}
.inline-link{display:inline-block;border:0;margin:0;padding:0}
.broadcast-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.broadcast-card{overflow:hidden;background:#fff;border:1px solid var(--broadcast-line);box-shadow:0 8px 22px rgba(7,24,41,.08)}
.broadcast-card-image{position:relative;aspect-ratio:16/9;background:#dfe6eb;overflow:hidden}
.broadcast-card-image img{height:100%;object-fit:cover}
.live-label{position:absolute;left:.65rem;bottom:.65rem;padding:.18rem .42rem;background:var(--broadcast-red);color:#fff;font-size:.65rem;font-weight:950;letter-spacing:.05em}
.live-label.static{position:static;display:inline-block}
.play-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.78);color:#fff;font-size:1.1rem}
.broadcast-card-body{padding:1rem}
.card-kicker{margin:0 0 .2rem;color:#123f82;text-transform:uppercase;font-size:.68rem;font-weight:950;letter-spacing:.08em}
.broadcast-card h3{margin:.15rem 0 .5rem;font-size:1.15rem;line-height:1.15}
.broadcast-card p{margin:.25rem 0 .9rem;color:var(--muted);font-size:.88rem;line-height:1.5}
.text-card{border-top:4px solid #123f82}
.broadcast-empty{grid-column:1/-1;padding:3.5rem;text-align:center;background:#f3f5f7;border:1px dashed #aeb8c2}
.filter-bar{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.3rem}
.filter-bar a{padding:.5rem .75rem;background:#eef1f4;color:#123f82;text-decoration:none;text-transform:uppercase;font-size:.7rem;font-weight:900}
.filter-bar a.active{background:#123f82;color:#fff}
.notice-banner{display:flex;gap:.75rem;align-items:center;margin-bottom:1.3rem;padding:.9rem 1rem;background:#eef4fa;border-left:5px solid #123f82}
.notice-banner span{color:#52606b}
.broadcast-table-wrap{overflow:auto;border:1px solid var(--broadcast-line);box-shadow:0 7px 20px rgba(7,24,41,.06)}
.broadcast-table{width:100%;border-collapse:collapse;background:#fff}
.broadcast-table th{padding:.8rem;background:#0a2238;color:#fff;text-align:left;text-transform:uppercase;font-size:.7rem;letter-spacing:.05em}
.broadcast-table td{padding:1rem .8rem;border-bottom:1px solid var(--broadcast-line);vertical-align:top;font-size:.88rem}
.broadcast-table td small{display:block;color:var(--muted)}
.viewer-shell{background:#061625;color:#fff;padding:2rem max(1rem,calc((100vw - 1250px)/2))}
.viewer-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1rem}
.viewer-heading h1{margin:.1rem 0;font-size:clamp(2rem,4vw,3.8rem);line-height:1;text-transform:uppercase}
.viewer-player{aspect-ratio:16/9;background:#000;box-shadow:0 12px 35px rgba(0,0,0,.35)}
.viewer-player video{width:100%;height:100%;background:#000}
.viewer-details{padding:1rem 0;color:#d5e1e9}
.related-strip{display:flex;justify-content:space-between;gap:2rem;align-items:center;padding:1.4rem max(1rem,calc((100vw - 1250px)/2));background:#eef1f4}
.related-strip strong,.related-strip span{display:block}.related-strip span{color:var(--muted);font-size:.85rem}
.blue-button.ghost{background:transparent;color:#123f82;border:1px solid #123f82}
.story-page{max-width:1120px;margin:auto;padding:3rem 1.25rem 5rem}
.story-header{max-width:900px}.story-header h1{margin:.2rem 0 .7rem;font-size:clamp(2.6rem,5vw,5rem);line-height:.96;letter-spacing:-.045em}
.story-deck{font-size:1.2rem;color:#52606b}
.story-lead-image{margin:2rem 0;width:100%;max-height:620px;object-fit:cover}
.story-body{max-width:780px;font-size:1.08rem;line-height:1.8}
.rules-panel{padding:2rem;background:#f3f5f7;border-top:5px solid #123f82;box-shadow:0 8px 25px rgba(7,24,41,.08)}
.rules-panel h2{margin-top:0;text-transform:uppercase;color:#123f82}
.checkbox-line{display:flex;gap:.7rem;align-items:flex-start;margin:1.2rem 0;font-weight:700}
.policy-links{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
.hero.compact{position:relative;isolation:isolate;background:url('../img/michigan/hero-lighthouse.jpg') center/cover;color:#fff;padding:3.2rem 1.25rem}
.hero.compact:before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(3,18,31,.8)}
.hero.compact h1{font-size:clamp(2.8rem,5vw,4.6rem);text-transform:uppercase}
.legal-page{padding:1.5rem 2rem;background:#fff;border-left:5px solid #123f82;box-shadow:0 8px 25px rgba(7,24,41,.08)}
.legal-page h2{font-size:1.45rem!important;color:#123f82;text-transform:uppercase;letter-spacing:-.01em}
.card-grid{gap:1rem}.media-card{border-radius:0}.media-card .card-image{border-radius:0}.media-card h3{font-size:1.1rem}.section{max-width:1280px}
.pricing-grid .price-card{border-radius:0;border-top:5px solid #123f82}.pricing-grid .price-card.featured{border:2px solid #123f82;border-top:7px solid var(--broadcast-red)}
.panel{border-radius:0;border-top:5px solid #123f82}
.newsletter{background:linear-gradient(90deg,#0a2238,#123f82)}
.site-footer{background:#061625}
@media(max-width:1050px){.broadcast-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){
.page-hero,.inner-hero{min-height:285px}.page-hero>div,.inner-hero-overlay{padding:3.5rem 1rem 2.3rem}
.broadcast-card-grid{grid-template-columns:1fr}.viewer-heading,.related-strip{align-items:flex-start;flex-direction:column}
.broadcast-table{min-width:760px}.notice-banner{align-items:flex-start;flex-direction:column}
.story-page{padding-top:2rem}.legal-page{padding:1.2rem}.chat-grid{grid-template-columns:1fr}
}
/* Directory marketplace, profile communications, and featured rotation */
.directory-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.5rem}.directory-tabs a{padding:.72rem 1rem;background:#e9eef4;color:#0b2f59;font-weight:800;text-transform:uppercase;font-size:.82rem;border-bottom:3px solid transparent}.directory-tabs a.active,.directory-tabs a:hover{background:#fff;border-color:#bd251b}.directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.profile-card{background:#fff;border:1px solid #d9e0e7;box-shadow:0 8px 24px rgba(8,28,48,.09);overflow:hidden}.profile-cover{display:block;height:190px;position:relative;background:#dfe8ef}.profile-cover img{width:100%;height:100%;object-fit:cover}.profile-type,.featured-badge{position:absolute;top:.75rem;padding:.32rem .55rem;color:#fff;font-size:.72rem;text-transform:uppercase;font-weight:900;letter-spacing:.04em}.profile-type{left:.75rem;background:#0d3e78}.featured-badge{right:.75rem;background:#bd251b}.profile-card-body{padding:1rem}.profile-card-body h2{font-size:1.25rem;margin:0 0 .35rem}.profile-card-body h2 a{color:#081d31}.profile-meta{font-size:.85rem;font-weight:800;color:#295988;text-transform:uppercase}.profile-card-actions{display:flex;gap:.75rem;border-top:1px solid #e3e8ed;padding-top:.8rem;margin-top:1rem}.profile-card-actions a{font-weight:800;color:#0d4c91}.profile-hero{min-height:390px;background-image:linear-gradient(90deg,rgba(3,18,32,.95),rgba(3,18,32,.48)),var(--profile-cover);background-size:cover;background-position:center}.profile-hero-overlay{max-width:1240px;margin:auto;padding:6rem 1.5rem 3.5rem;color:#fff}.profile-identity{display:flex;align-items:flex-end;gap:1.5rem}.profile-identity>img{width:150px;height:150px;object-fit:cover;border:5px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.35)}.profile-identity h1{font-size:clamp(2.2rem,5vw,4.6rem);line-height:.95;margin:.2rem 0 .8rem;text-transform:uppercase}.profile-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:1.5rem;align-items:start}.profile-main,.profile-sidebar{display:grid;gap:1.25rem}.broadcast-panel{background:#fff;border:1px solid #d8e0e8;padding:1.35rem;box-shadow:0 8px 24px rgba(6,26,46,.08)}.video-frame video{width:100%;background:#000;aspect-ratio:16/9}.transaction-panel .full{display:block;text-align:center;margin:.55rem 0}.action-button{width:100%;padding:.82rem;margin:.35rem 0;text-align:left;background:#eef3f7;border:1px solid #ced9e3;color:#092d51;font-weight:800;cursor:pointer}.action-button:hover{background:#dfeaf3}.contact-facts p{padding-bottom:.8rem;border-bottom:1px solid #e4e8ec}.webrtc-name-row{display:flex;align-items:end;gap:.75rem;flex-wrap:wrap}.webrtc-name-row label{flex:1;min-width:220px}.webrtc-name-row input,#profile-action-form input,#profile-action-form textarea{width:100%;padding:.78rem;border:1px solid #bfcbd5;margin-top:.3rem}.webrtc-stage{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.webrtc-stage>div{position:relative;background:#071829}.webrtc-stage video{width:100%;aspect-ratio:16/10;object-fit:cover;background:#071829}.webrtc-stage span{position:absolute;left:.6rem;bottom:.6rem;background:rgba(0,0,0,.75);color:#fff;padding:.25rem .5rem;font-size:.75rem}.rtc-status{font-weight:700;color:#305777}dialog{border:0;padding:0;max-width:620px;width:calc(100% - 2rem);box-shadow:0 20px 70px rgba(0,0,0,.35)}dialog::backdrop{background:rgba(2,14,25,.78)}#profile-action-form{padding:1.5rem;display:grid;gap:.8rem}#profile-action-form label{font-weight:800;color:#193b5c}.dialog-close{position:absolute;right:.45rem;top:.35rem}.dialog-close button{border:0;background:transparent;font-size:2rem;cursor:pointer}.live-feature-layout{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(280px,.8fr);gap:1.25rem;align-items:start}.feature-stream-panel{background:#071829;color:#fff}.stream-heading{padding:.85rem 1rem;display:flex;justify-content:space-between}.stream-heading a{color:#a9d3ff}.live-dot{display:inline-block;width:10px;height:10px;background:#e12a1f;border-radius:50%;margin-right:.45rem;box-shadow:0 0 0 5px rgba(225,42,31,.18)}.feature-video video,.stream-placeholder{width:100%;aspect-ratio:16/9;background:#000}.stream-placeholder{display:grid;place-content:center;text-align:center;padding:2rem}.stream-placeholder span{font-size:3rem;color:#d52b1e}.now-featured{display:flex;gap:1rem;padding:1rem}.now-featured img{width:120px;height:120px;object-fit:cover}.rotation-schedule{max-height:720px;overflow:auto}.rotation-item{display:flex;gap:.75rem;padding:.75rem 0;border-bottom:1px solid #dce3e9;color:#102f4e}.rotation-item.current{border-left:4px solid #d52b1e;padding-left:.6rem;background:#f4f7fa}.rotation-item img{width:64px;height:64px;object-fit:cover}.rotation-item span{display:grid}.rotation-item small{color:#567086;margin-top:.25rem}.three-column-info{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.three-column-info>div{padding:1rem;background:#edf3f7}
@media(max-width:900px){.directory-grid{grid-template-columns:repeat(2,1fr)}.profile-layout,.live-feature-layout{grid-template-columns:1fr}.profile-identity{align-items:center}.three-column-info{grid-template-columns:1fr}}
@media(max-width:620px){.directory-grid,.webrtc-stage{grid-template-columns:1fr}.profile-identity{display:block}.profile-identity>img{width:110px;height:110px}.profile-hero-overlay{padding-top:3.5rem}.now-featured{display:block}.now-featured img{width:100%;height:180px;margin-bottom:1rem}}
/* Invitation-only membership */
.membership-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}.membership-card{display:flex;flex-direction:column}.membership-card h3{font-size:1.4rem;margin:.2rem 0}.membership-price{font-size:2.4rem;font-weight:900;color:#0b3f76;margin:.4rem 0 1rem}.membership-price small{font-size:.9rem;color:#617387}.membership-card ul{padding-left:1.2rem;flex:1}.membership-card li{margin:.55rem 0}.narrow-page{max-width:780px}.broadcast-form{display:grid;gap:1rem}.broadcast-form label{font-weight:800;color:#173a59}.broadcast-form input,.broadcast-form select,.broadcast-form textarea{display:block;width:100%;padding:.8rem;margin-top:.3rem;border:1px solid #b9c7d3;background:#fff;font:inherit}.inline-form{grid-template-columns:repeat(2,minmax(0,1fr))}.full-row{grid-column:1/-1}.notice{padding:1rem;margin:0 0 1rem;font-weight:800}.notice.success{background:#e7f7ed;border-left:5px solid #19834b}.notice.error{background:#fff0ef;border-left:5px solid #c82d21}.dashboard-head{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:1.2rem}.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.2rem;margin-bottom:1.2rem}.big-number{font-size:3rem;font-weight:900;margin:0;color:#b92119}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.75rem;border-bottom:1px solid #dce3e9}.member-admin-card summary,.admin-card summary{cursor:pointer;padding:.5rem 0}.inline-action{display:flex;gap:.7rem;align-items:center;margin-top:1rem}.membership-band{max-width:1240px;margin:2rem auto;padding:2rem;background:#071829;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:2rem}.membership-band .blue-button{margin-left:.5rem}.locked-action{display:block;text-decoration:none}.trust-panel{margin-top:1.5rem}
@media(max-width:900px){.membership-grid{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:620px){.membership-grid,.inline-form{grid-template-columns:1fr}.full-row{grid-column:auto}.dashboard-head,.membership-band{display:block}.membership-band .red-button,.membership-band .blue-button{display:block;margin:.6rem 0;text-align:center}}
/* Michigan eligibility */
.certification-check{display:flex!important;gap:.75rem;align-items:flex-start;padding:1rem;border:1px solid rgba(31,78,121,.25);background:#f4f8fc;border-radius:.5rem}
.certification-check input{width:auto!important;margin-top:.25rem}
.michigan-badge{position:absolute;left:.75rem;bottom:.75rem;background:#0a4b78;color:#fff;padding:.35rem .6rem;border-radius:999px;font-size:.75rem;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.michigan-connection{color:#0a4b78;font-weight:700}
button:disabled{opacity:.5;cursor:not-allowed}
/* Company hierarchy */
.company-relationship{border-left:5px solid var(--red,#d71920)}
.company-child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.company-child-card{display:flex;gap:1rem;padding:1rem;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(7,24,41,.04)}
.company-child-card img{width:72px;height:72px;object-fit:cover;border-radius:10px;background:#eef2f5}
.company-child-card h3{margin:.2rem 0 .4rem}
.company-child-card p{margin:.2rem 0}
.company-structure-meta{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#ad1e24}
.official-site-link{font-weight:800;overflow-wrap:anywhere}
.admin-table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{text-align:left;padding:.75rem;border-bottom:1px solid rgba(0,0,0,.12);vertical-align:top}
.check-row{display:flex!important;align-items:center;gap:.5rem}
.check-row input{width:auto!important}
/* =========================================================
MichiganChat Unified Visual System — Public, Member, Admin
========================================================= */
:root{
--mc-ink:#0d1f2d;
--mc-navy:#061a2b;
--mc-navy-2:#0b2f4d;
--mc-blue:#0b74b8;
--mc-blue-2:#155f93;
--mc-red:#c9251b;
--mc-gold:#f0b644;
--mc-surface:#ffffff;
--mc-surface-2:#f3f6f8;
--mc-line:#d7e0e7;
--mc-muted:#5f7180;
--mc-success:#16794a;
--mc-warning:#9a6500;
--mc-danger:#b7251c;
--mc-radius:12px;
--mc-shadow:0 10px 30px rgba(4,24,39,.09);
--mc-container:1680px;
--mc-gutter:clamp(14px,2vw,32px);
}
html{width:100%;max-width:100%;overflow-x:hidden}
body{width:100%;max-width:100%;overflow-x:hidden;background:var(--mc-surface-2);color:var(--mc-ink)}
body,button,input,select,textarea{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
main{min-width:0}
img,video,iframe,canvas,svg{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
pre,code{overflow-wrap:anywhere}
table{min-width:680px}
/* One width system everywhere */
.section,.broadcast-page,.hero-inner,.page-hero>div,.profile-hero-overlay,
.broadcast-header-inner,.footer-grid,.footer-bottom,.newsletter>div,
.admin-page,.admin-layout>.section,.admin-content{
width:min(100%,var(--mc-container));
max-width:var(--mc-container);
margin-inline:auto;
padding-inline:var(--mc-gutter);
}
.section,.broadcast-page{padding-top:clamp(28px,4vw,64px);padding-bottom:clamp(28px,4vw,64px)}
.section.narrow,.narrow-page{width:min(100%,760px);max-width:760px}
.quick-links,.membership-band{width:calc(100% - (var(--mc-gutter) * 2));max-width:var(--mc-container)}
.container,.container-fluid{width:100%;max-width:var(--mc-container);margin-inline:auto;padding-inline:var(--mc-gutter)}
/* Public broadcast header */
.broadcast-header{position:sticky;top:0;z-index:1000;background:linear-gradient(90deg,#061a2b,#092944);border-bottom:3px solid var(--mc-blue);box-shadow:0 5px 18px rgba(2,17,29,.2)}
.broadcast-header-inner{min-height:76px;display:flex;align-items:center;gap:22px}
.broadcast-brand{flex:0 0 auto;color:#fff;text-decoration:none;line-height:1}
.broadcast-brand-main{display:block;font-size:clamp(20px,2vw,29px);font-weight:950;letter-spacing:-.04em}
.broadcast-brand-main span{display:inline-block;margin-left:4px;padding:3px 6px;border-radius:4px;background:var(--mc-blue)}
.broadcast-brand small{display:block;margin-top:5px;color:#c9dbe8;font-size:11px;font-weight:750}
.broadcast-nav{min-width:0;display:flex;align-items:center;gap:clamp(10px,1.25vw,22px);margin-left:auto}
.broadcast-nav a{white-space:nowrap;color:#fff;text-decoration:none;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.broadcast-nav a:hover,.broadcast-nav a:focus{color:#77c7f4}
.watch-live-button,.red-button,.blue-button,.button,.btn{
display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:0;border-radius:7px;
font-weight:850;text-decoration:none;cursor:pointer;transition:transform .15s ease,filter .15s ease
}
.watch-live-button,.red-button{background:var(--mc-red);color:#fff}
.blue-button,.button,.btn{background:var(--mc-blue);color:#fff}
.watch-live-button:hover,.red-button:hover,.blue-button:hover,.button:hover,.btn:hover{filter:brightness(.94);transform:translateY(-1px)}
.nav-toggle{display:none;margin-left:auto}
/* Shared page presentation */
.page-hero,.hero{background-position:center;background-size:cover}
.page-hero{padding:clamp(56px,7vw,105px) 0}
.page-hero h1,.hero h1{max-width:1100px;overflow-wrap:anywhere}
.broadcast-kicker,.eyebrow{font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.section-head{align-items:center}
.section-head h1,.section-head h2,.broadcast-page h1{overflow-wrap:anywhere}
.broadcast-panel,.media-card,.membership-card,.profile-card,.admin-card,.member-admin-card{
min-width:0;border:1px solid var(--mc-line);border-radius:var(--mc-radius);background:var(--mc-surface);box-shadow:var(--mc-shadow);overflow:hidden
}
.broadcast-panel,.admin-card,.member-admin-card{padding:clamp(18px,2vw,30px)}
.card-grid,.directory-grid,.membership-grid,.dashboard-grid,.profile-layout,.live-feature-layout{min-width:0}
.card-grid>* ,.directory-grid>* ,.membership-grid>* ,.dashboard-grid>* ,.profile-layout>* ,.live-feature-layout>*{min-width:0}
.media-card img,.profile-card img{object-fit:cover}
.muted{color:var(--mc-muted)}
.notice,.alert{border-radius:8px}
.form,.broadcast-form{width:100%;min-width:0}
.form label,.broadcast-form label{display:block;font-weight:800;color:#173a59}
.form input,.form select,.form textarea,.broadcast-form input,.broadcast-form select,.broadcast-form textarea{
width:100%;min-width:0;max-width:100%;padding:12px 13px;border:1px solid #b9c7d3;border-radius:7px;background:#fff;color:var(--mc-ink);font:inherit
}
.form input:focus,.form select:focus,.form textarea:focus,.broadcast-form input:focus,.broadcast-form select:focus,.broadcast-form textarea:focus{
outline:3px solid rgba(11,116,184,.16);border-color:var(--mc-blue)
}
.table-wrap,.admin-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--mc-line);border-radius:9px}
.table-wrap table,.admin-table-wrap table{margin:0;background:#fff}
th{background:#eaf0f4;color:#12334f;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
th,td{padding:12px 14px}
/* Authentication */
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);background:#f2f5f7}
.auth-brand-panel{position:relative;display:flex;align-items:flex-end;padding:clamp(32px,6vw,90px);color:#fff;background:
linear-gradient(135deg,rgba(3,20,34,.94),rgba(8,61,97,.72)),
url("../images/michigan-lighthouse-hero.jpg") center/cover no-repeat}
.auth-brand-panel h1{max-width:700px;margin:0;font-size:clamp(42px,6vw,88px);line-height:.9;letter-spacing:-.055em}
.auth-brand-panel p{max-width:630px;font-size:18px;color:#d8e7f1}
.auth-form-panel{display:grid;place-items:center;padding:var(--mc-gutter)}
.auth-card{width:min(100%,560px);padding:clamp(24px,4vw,48px);border:1px solid var(--mc-line);border-radius:16px;background:#fff;box-shadow:var(--mc-shadow)}
.auth-card h2{margin:0 0 10px;font-size:clamp(30px,4vw,48px);line-height:1}
.auth-card .form{display:grid;gap:16px;margin-top:25px}
.auth-card .button{width:100%}
/* Admin shell */
.admin-shell{min-height:100vh;background:#eef2f5}
.admin-topbar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:18px;min-height:70px;padding:10px var(--mc-gutter);background:var(--mc-navy);color:#fff;box-shadow:0 5px 18px rgba(2,17,29,.2)}
.admin-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:900;white-space:nowrap}
.admin-brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:var(--mc-blue);font-size:12px;letter-spacing:.08em}
.admin-nav{display:flex;min-width:0;align-items:center;gap:6px;margin-left:auto;overflow-x:auto;scrollbar-width:thin}
.admin-nav a{flex:0 0 auto;padding:9px 11px;border-radius:6px;color:#dce8f0;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap}
.admin-nav a:hover,.admin-nav a:focus{background:#123b59;color:#fff}
.admin-nav .admin-logout{background:#8f211b;color:#fff}
.admin-layout{width:100%;max-width:none;margin:0;padding:0}
.admin-layout>.section,.admin-page{padding-top:32px;padding-bottom:48px}
.admin-layout h1,.admin-layout h2{line-height:1.05;letter-spacing:-.035em}
.admin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.admin-stat{min-width:0;padding:22px;border:1px solid var(--mc-line);border-radius:var(--mc-radius);background:#fff;box-shadow:var(--mc-shadow)}
.admin-stat strong{display:block;font-size:clamp(28px,4vw,48px);color:var(--mc-blue)}
.admin-footer{padding:24px var(--mc-gutter);border-top:1px solid var(--mc-line);color:var(--mc-muted);text-align:center}
/* Member dashboard */
.dashboard-head{padding:clamp(24px,3vw,42px);border-radius:var(--mc-radius);background:linear-gradient(120deg,var(--mc-navy),#0d4b75);color:#fff;box-shadow:var(--mc-shadow)}
.dashboard-head p{color:#d9e7f0}
.dashboard-grid{grid-template-columns:minmax(0,2fr) minmax(260px,1fr)}
.big-number{line-height:1}
/* Footer */
.newsletter{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:clamp(28px,4vw,55px) var(--mc-gutter);background:linear-gradient(110deg,#0a3150,#0b5783);color:#fff}
.newsletter>div{margin:0;padding:0}
.site-footer{background:#061a2b;color:#c8d7e1}
.footer-grid{grid-template-columns:1.4fr repeat(3,minmax(150px,1fr));gap:clamp(25px,4vw,70px);padding-top:50px;padding-bottom:38px}
.footer-grid a{color:#e8f2f8}
.footer-bottom{padding-top:20px;padding-bottom:20px}
/* Responsive */
@media (max-width:1280px){
.broadcast-header-inner{flex-wrap:wrap;padding-top:11px;padding-bottom:11px}
.broadcast-nav{order:3;width:100%;margin:0;overflow-x:auto;padding:5px 0 2px}
.watch-live-button{margin-left:auto}
.admin-nav{gap:3px}
.admin-nav a{padding-inline:8px}
}
@media (max-width:980px){
.nav-toggle{display:inline-flex}
.broadcast-header-inner{min-height:68px;flex-wrap:nowrap}
.broadcast-nav{display:none;position:absolute;left:0;right:0;top:100%;width:100%;max-height:calc(100vh - 70px);overflow:auto;flex-direction:column;align-items:stretch;padding:12px var(--mc-gutter);background:#061a2b;border-top:1px solid rgba(255,255,255,.12)}
.broadcast-nav.open{display:flex}
.broadcast-nav a{padding:12px;border-bottom:1px solid rgba(255,255,255,.09)}
.watch-live-button{display:none}
.auth-shell{grid-template-columns:1fr}
.auth-brand-panel{min-height:280px;padding:40px var(--mc-gutter)}
.auth-form-panel{padding-top:35px;padding-bottom:55px}
.admin-topbar{flex-wrap:wrap}
.admin-nav{order:3;width:100%;margin:0}
.admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
:root{--mc-gutter:14px}
.broadcast-brand small{display:none}
.broadcast-brand-main{font-size:20px}
.section,.broadcast-page{padding-top:28px;padding-bottom:28px}
.section-head,.dashboard-head,.newsletter{display:block}
.section-head>*+*,.dashboard-head>*+*,.newsletter>*+*{margin-top:16px}
.card-grid,.directory-grid,.membership-grid,.dashboard-grid,.profile-layout,.live-feature-layout,.inline-form,.admin-grid{grid-template-columns:1fr}
.profile-identity{align-items:flex-start}
.footer-grid{grid-template-columns:1fr}
.auth-brand-panel h1{font-size:42px}
.auth-card{padding:24px 18px}
.admin-topbar{padding-inline:12px}
.admin-nav{padding-bottom:5px}
table{min-width:620px}
}
/* =========================================================
MichiganChat Unified Form System
Full normalization for public pages and member dashboards
========================================================= */
:root {
--mc-form-width: 920px;
--mc-form-gap: 18px;
--mc-field-height: 50px;
--mc-field-radius: 9px;
--mc-field-border: #b9c8d3;
--mc-field-focus: #0879b7;
--mc-field-bg: #ffffff;
--mc-field-ink: #142331;
}
/* Prevent inherited page rules from scattering form children. */
form.form,
form.broadcast-form,
form.agree-form,
form#profile-action-form {
min-width: 0;
max-width: 100%;
margin: 0;
}
/* Standard forms: one clean vertical flow. */
form.form {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: var(--mc-form-gap) !important;
width: min(100%, var(--mc-form-width));
}
/* Panels containing forms retain a readable width. */
form.form.panel {
padding: clamp(20px, 3vw, 34px);
}
/* Support both markup styles:
1)
2) */
form.form > label,
form.broadcast-form > label,
form#profile-action-form > label {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 7px;
min-width: 0;
margin: 0 !important;
color: #173a59;
font-size: 0.92rem;
font-weight: 800;
line-height: 1.3;
}
form.form > label + input,
form.form > label + select,
form.form > label + textarea {
margin-top: -11px;
}
/* Every control uses the same dimensions and box model. */
form.form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
form.form select,
form.form textarea,
form.broadcast-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
form.broadcast-form select,
form.broadcast-form textarea,
form#profile-action-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
form#profile-action-form select,
form#profile-action-form textarea {
display: block;
width: 100% !important;
max-width: 100%;
min-width: 0;
min-height: var(--mc-field-height);
margin: 0 !important;
padding: 11px 14px;
border: 1px solid var(--mc-field-border);
border-radius: var(--mc-field-radius);
background: var(--mc-field-bg);
color: var(--mc-field-ink);
font: inherit;
line-height: 1.35;
outline: 0;
}
form.form textarea,
form.broadcast-form textarea,
form#profile-action-form textarea {
min-height: 130px;
resize: vertical;
}
form.form input:focus,
form.form select:focus,
form.form textarea:focus,
form.broadcast-form input:focus,
form.broadcast-form select:focus,
form.broadcast-form textarea:focus,
form#profile-action-form input:focus,
form#profile-action-form select:focus,
form#profile-action-form textarea:focus {
border-color: var(--mc-field-focus);
box-shadow: 0 0 0 4px rgba(8, 121, 183, 0.15);
}
/* Structured forms: controlled two-column layout.
The inline-form class no longer means horizontal flex. */
form.broadcast-form,
form.broadcast-form.inline-form {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
align-items: start;
gap: var(--mc-form-gap) !important;
width: min(100%, 1040px);
}
form.broadcast-form > .full-row,
form.broadcast-form > p,
form.broadcast-form > .notice,
form.broadcast-form > fieldset {
grid-column: 1 / -1;
}
/* Buttons in structured forms receive a stable row rather than floating. */
form.broadcast-form > button,
form.broadcast-form > .button,
form.broadcast-form > .red-button,
form.broadcast-form > .blue-button {
align-self: end;
justify-self: start;
min-width: 150px;
}
/* Tiny one-operation forms remain compact. */
form.inline-action {
display: inline-flex !important;
align-items: center;
flex-wrap: wrap;
gap: 8px !important;
width: auto !important;
max-width: 100%;
margin: 0;
}
form.inline-action input,
form.inline-action select {
width: auto !important;
min-width: 150px;
}
form.inline-action button {
flex: 0 0 auto;
}
/* Agreement forms. */
form.agree-form {
display: grid !important;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
width: min(100%, 760px);
}
form.agree-form .checkbox-line,
form.form .checkbox-line {
display: flex !important;
align-items: flex-start;
gap: 10px !important;
font-weight: 700;
}
form.agree-form input[type="checkbox"],
form.form input[type="checkbox"],
form.broadcast-form input[type="checkbox"] {
flex: 0 0 18px;
width: 18px !important;
height: 18px;
min-height: 0;
margin-top: 3px !important;
accent-color: var(--mc-field-focus);
}
/* Dialog/profile contact form. */
dialog form#profile-action-form {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--mc-form-gap);
width: min(86vw, 760px);
}
dialog form#profile-action-form h2,
dialog form#profile-action-form textarea,
dialog form#profile-action-form [type="submit"],
dialog form#profile-action-form .full-row {
grid-column: 1 / -1;
}
/* Paragraph wrappers around submit buttons should not add odd spacing. */
form.form > p,
form.broadcast-form > p {
margin: 0;
}
/* File inputs need a little less visual weight. */
form input[type="file"] {
padding: 9px !important;
background: #f7fafc !important;
}
/* Browser validation and disabled states. */
form input:disabled,
form select:disabled,
form textarea:disabled {
cursor: not-allowed;
background: #edf1f3 !important;
color: #6c7780;
opacity: 1;
}
/* Mobile: every substantive form becomes one column. */
@media (max-width: 760px) {
form.form,
form.broadcast-form,
form.broadcast-form.inline-form,
dialog form#profile-action-form {
grid-template-columns: minmax(0, 1fr) !important;
width: 100%;
gap: 15px !important;
}
form.broadcast-form > *,
dialog form#profile-action-form > * {
grid-column: 1 !important;
}
form.broadcast-form > button,
form.broadcast-form > .button,
form.broadcast-form > .red-button,
form.broadcast-form > .blue-button,
form.form button,
form.form .button {
width: 100%;
justify-self: stretch;
}
form.inline-action {
display: grid !important;
grid-template-columns: 1fr;
width: 100% !important;
}
form.inline-action input,
form.inline-action select,
form.inline-action button,
form.inline-action .button {
width: 100% !important;
}
}
.official-websites,.relationship-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.official-website-card,.relationship-list a{display:grid;gap:5px;padding:16px;border:1px solid #cad8e2;border-radius:10px;background:#fff;text-decoration:none}
.official-website-card em{justify-self:start;padding:3px 8px;border-radius:999px;background:#e7f3fa;font-size:.75rem;font-style:normal;font-weight:800}
.relationship-list a span{color:#607180;font-size:.78rem;font-weight:800;text-transform:uppercase}
/* Grouped navigation capacity fix — 2026-07-17 */
.broadcast-header { overflow: visible; }
.broadcast-header-inner {
max-width: 1536px;
min-width: 0;
gap: clamp(.8rem, 1.4vw, 1.5rem);
}
.grouped-nav {
display: flex;
flex: 1 1 auto;
min-width: 0;
align-items: center;
justify-content: flex-end;
gap: .25rem;
margin-left: auto;
}
.grouped-nav > a,
.nav-group-toggle {
display: inline-flex;
min-height: 42px;
align-items: center;
justify-content: center;
padding: .65rem .8rem;
border: 0;
border-radius: 5px;
background: transparent;
color: #fff;
font: inherit;
font-size: .82rem;
font-weight: 850;
letter-spacing: .02em;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
}
.grouped-nav > a:hover,
.grouped-nav > a:focus-visible,
.nav-group-toggle:hover,
.nav-group-toggle:focus-visible,
.nav-group.open > .nav-group-toggle {
background: rgba(255,255,255,.1);
color: #9fd0ff;
outline: none;
}
.nav-group { position: relative; flex: 0 0 auto; }
.nav-group-toggle span { margin-left: .35rem; font-size: .72rem; }
.nav-dropdown {
position: absolute;
z-index: 100;
top: calc(100% + .45rem);
left: 0;
display: none;
width: max-content;
min-width: 220px;
max-width: min(320px, calc(100vw - 2rem));
padding: .45rem;
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
background: #fff;
box-shadow: 0 18px 42px rgba(0,0,0,.25);
}
.nav-group.open > .nav-dropdown { display: grid; }
.nav-dropdown a {
display: block;
padding: .72rem .8rem;
border-radius: 5px;
color: #0b2940;
font-size: .88rem;
font-weight: 750;
letter-spacing: 0;
line-height: 1.25;
text-decoration: none;
text-transform: none;
white-space: nowrap;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
background: #eaf3f9;
color: #0c5f91;
outline: none;
}
.header-cta { flex: 0 0 auto; }
@media (min-width: 901px) {
.nav-group:hover > .nav-dropdown { display: grid; }
.nav-group:focus-within > .nav-dropdown { display: grid; }
}
@media (max-width: 1100px) {
.broadcast-header-inner { padding-inline: 1rem; }
.broadcast-brand-main { font-size: 1.45rem; }
.broadcast-brand small { font-size: .65rem; }
.grouped-nav > a, .nav-group-toggle { padding-inline: .55rem; font-size: .76rem; }
.header-cta { padding-inline: .8rem; font-size: .78rem; }
}
@media (max-width: 900px) {
.broadcast-header-inner {
min-height: 68px;
flex-wrap: wrap;
padding-block: .65rem;
}
.nav-toggle {
display: inline-flex;
order: 2;
margin-left: auto;
min-height: 42px;
align-items: center;
padding: .6rem .9rem;
border: 1px solid rgba(255,255,255,.35);
border-radius: 5px;
background: transparent;
color: #fff;
font-weight: 850;
}
.header-cta { order: 3; }
.grouped-nav {
position: static;
order: 4;
display: none;
flex: 1 0 100%;
width: 100%;
margin: .35rem 0 0;
padding: .55rem;
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
background: #071829;
align-items: stretch;
}
.grouped-nav.open { display: grid; }
.grouped-nav > a, .nav-group-toggle {
width: 100%;
justify-content: space-between;
padding: .8rem;
text-align: left;
}
.nav-group { width: 100%; }
.nav-dropdown {
position: static;
width: 100%;
max-width: none;
margin: 0 0 .35rem;
border: 0;
box-shadow: none;
}
.nav-dropdown a { white-space: normal; }
}
@media (max-width: 560px) {
.broadcast-brand small { display: none; }
.broadcast-brand-main { font-size: 1.18rem; }
.header-cta { display: none; }
}
/* ==========================================================================
MichiganChat membership page — compact HumanPal-inspired presentation
========================================================================== */
.membership-hero{
position:relative;
overflow:hidden;
color:#fff;
background:
radial-gradient(circle at 84% 14%,rgba(26,165,131,.34),transparent 24rem),
linear-gradient(125deg,#061b2d 0%,#0b3e62 60%,#17694f 100%);
}
.membership-hero:after{
content:"";
position:absolute;
right:-12rem;
bottom:-20rem;
width:34rem;
height:34rem;
border:1px solid rgba(255,255,255,.12);
border-radius:50%;
box-shadow:0 0 0 4rem rgba(255,255,255,.025),0 0 0 8rem rgba(255,255,255,.018);
pointer-events:none;
}
.membership-hero-inner{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
align-items:center;
gap:clamp(2rem,4vw,4rem);
width:min(100%,1280px);
margin:0 auto;
padding:clamp(2.75rem,5vw,4.5rem) clamp(1.25rem,3vw,2.25rem);
}
.membership-hero-copy h1{
max-width:720px;
margin:.3rem 0 .85rem;
font-size:clamp(2.7rem,5vw,4.8rem);
line-height:.98;
letter-spacing:-.05em;
text-transform:none;
}
.membership-hero-lead{
max-width:700px;
margin:0;
color:#e4eef4;
font-size:clamp(1rem,1.3vw,1.15rem);
line-height:1.55;
}
.membership-secondary-button{border:1px solid rgba(255,255,255,.68);background:rgba(255,255,255,.1);color:#fff}
.membership-hero .actions{margin-top:1.3rem}
.membership-hero-trust{
display:flex;
flex-wrap:wrap;
gap:.55rem 1.1rem;
margin-top:1.25rem;
color:#dce9ef;
font-size:.82rem;
font-weight:750;
}
.membership-hero-trust span:before{content:"✓";margin-right:.4rem;color:#69d4a6;font-weight:1000}
.membership-hero-visual{
display:grid;
grid-template-columns:1.15fr .85fr;
grid-template-rows:1fr 1fr;
gap:.8rem;
min-height:330px;
}
.membership-portrait{
position:relative;
min-height:0;
overflow:hidden;
border:1px solid rgba(255,255,255,.28);
border-radius:18px;
background:#0a2d46;
box-shadow:0 16px 36px rgba(0,0,0,.22);
}
.membership-portrait-large{grid-row:1/3}
.membership-portrait img{width:100%;height:100%;object-fit:cover}
.membership-portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(3,16,27,.88) 100%)}
.membership-portrait div{position:absolute;z-index:1;left:1rem;right:1rem;bottom:.85rem}
.membership-portrait strong,.membership-portrait span{display:block}
.membership-portrait strong{font-size:1.05rem}
.membership-portrait span{color:#d9e8ef;font-size:.78rem}
.membership-page{width:min(100%,1280px);margin:0 auto;padding:clamp(2.2rem,4vw,3.5rem) clamp(1rem,2.5vw,1.75rem) 3.5rem}
.membership-intro{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);
align-items:end;
gap:clamp(1.5rem,4vw,4rem);
margin-bottom:1.5rem;
}
.membership-intro h2,.membership-explainer h2,.membership-final-cta h2{
margin:.15rem 0 0;
color:#082a45;
font-size:clamp(2rem,3.3vw,3.25rem);
line-height:1.02;
letter-spacing:-.04em;
}
.membership-intro>p{margin:0;color:#526777;font-size:.98rem;line-height:1.6}
.membership-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;align-items:stretch}
.membership-card{
grid-column:span 2;
display:flex;
flex-direction:column;
min-width:0;
padding:0;
overflow:hidden;
border:1px solid #d7e1e7;
border-radius:16px;
background:#fff;
box-shadow:0 10px 26px rgba(5,35,57,.08);
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.membership-card:hover{transform:translateY(-3px);border-color:#b8ccd8;box-shadow:0 16px 34px rgba(5,35,57,.13)}
.membership-card:nth-child(4){grid-column:2/span 2}
.membership-card:nth-child(5){grid-column:4/span 2}
.membership-card-image{position:relative;height:125px;overflow:hidden;background:#dfe8ed}
.membership-card-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(4,22,36,.48) 100%)}
.membership-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.membership-card:hover .membership-card-image img{transform:scale(1.025)}
.membership-plan-badge{position:absolute;z-index:2;top:.7rem;right:.7rem;padding:.38rem .58rem;border-radius:999px;background:#f2b84b;color:#102b3f;font-size:.62rem;font-weight:950;text-transform:uppercase;letter-spacing:.035em}
.membership-card-body{display:flex;flex:1;flex-direction:column;padding:1.25rem}
.membership-plan-eyebrow{margin:0 0 .25rem;color:#187357;font-size:.66rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.membership-card h3{margin:0;color:#082a45;font-size:clamp(1.35rem,1.8vw,1.7rem);line-height:1.08;letter-spacing:-.025em}
.membership-card-summary{min-height:4.25rem;margin:.55rem 0 .1rem;color:#5a6c79;font-size:.91rem;line-height:1.48}
.membership-price{display:flex;align-items:baseline;margin:.75rem 0 .8rem;color:#0b477d;font-size:clamp(2.2rem,3vw,2.9rem);font-weight:950;line-height:1;letter-spacing:-.04em}
.membership-price-currency{font-size:.58em;vertical-align:top}
.membership-price small{margin-left:.25rem;color:#667887;font-size:.75rem;font-weight:850;letter-spacing:0}
.membership-feature-list{display:grid;gap:.45rem;flex:1;margin:0 0 1.1rem;padding:0;list-style:none}
.membership-feature-list li{position:relative;margin:0;padding-left:1.5rem;color:#243a4a;font-size:.9rem;line-height:1.32}
.membership-feature-list li:before{content:"✓";position:absolute;left:0;top:.01rem;display:grid;place-items:center;width:1rem;height:1rem;border-radius:50%;background:#daf3e8;color:#167050;font-size:.62rem;font-weight:1000}
.membership-card-button{width:100%;min-height:42px;margin-top:auto;border-radius:7px;text-align:center;font-size:.78rem}
.membership-card-business-plus{border:2px solid #178262}
.membership-card-business-plus .membership-card-button{background:#18775b}
.membership-card-organization .membership-card-button{background:#6f4388}
.membership-explainer{
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(400px,1.05fr);
gap:clamp(2rem,5vw,5rem);
align-items:center;
margin-top:2.25rem;
padding:clamp(1.6rem,3.2vw,2.75rem);
border-radius:18px;
background:linear-gradient(135deg,#eef5f7,#f7f8f4);
}
.membership-explainer-copy>p:not(.broadcast-kicker){margin:.65rem 0 0;color:#536979;font-size:.94rem;line-height:1.55}
.membership-process{display:grid;gap:.7rem}
.membership-process>div{position:relative;padding:.9rem 1rem .9rem 3.85rem;border:1px solid #d7e1e7;border-radius:12px;background:#fff;box-shadow:0 7px 18px rgba(5,35,57,.05)}
.membership-process span{position:absolute;left:.9rem;top:.82rem;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:#0c75b2;color:#fff;font-size:.88rem;font-weight:950}
.membership-process strong{display:block;color:#102f48;font-size:.95rem}
.membership-process p{margin:.18rem 0 0;color:#647684;font-size:.82rem}
.membership-final-cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-top:1.25rem;padding:clamp(1.5rem,3vw,2.4rem);border-radius:18px;background:linear-gradient(125deg,#061d31,#0b4b70);color:#fff}
.membership-final-cta h2{color:#fff;font-size:clamp(1.9rem,3vw,2.8rem)}
.membership-final-cta p:not(.broadcast-kicker){margin:.45rem 0 0;color:#dce9f0}
.membership-final-cta .actions{flex:0 0 auto;margin:0}
@media(max-width:1050px){
.membership-hero-inner{grid-template-columns:1fr}
.membership-hero-visual{min-height:300px;max-width:780px;width:100%}
.membership-card{grid-column:span 3}
.membership-card:nth-child(5){grid-column:2/span 4}
.membership-card-summary{min-height:0}
}
@media(max-width:820px){
.membership-intro,.membership-explainer{grid-template-columns:1fr}
.membership-grid{grid-template-columns:1fr}
.membership-card,.membership-card:nth-child(4),.membership-card:nth-child(5){grid-column:auto}
.membership-final-cta{display:block}
.membership-final-cta .actions{margin-top:1.2rem}
}
@media(max-width:620px){
.membership-hero-inner{padding-top:2.5rem;padding-bottom:2.5rem}
.membership-hero-copy h1{font-size:clamp(2.45rem,13vw,3.45rem)}
.membership-hero-visual{grid-template-columns:1fr 1fr;grid-template-rows:190px 135px;min-height:0}
.membership-portrait-large{grid-column:1/3;grid-row:auto}
.membership-portrait{border-radius:14px}
.membership-card-image{height:115px}
.membership-explainer,.membership-final-cta{border-radius:14px}
.membership-process>div{padding-left:3.65rem}
}
/* =========================================================
MichiganChat Public Visual System — July 18, 2026
Shared header, footer, home, and directory pages
========================================================= */
:root{--mc-public-width:1480px;--mc-public-gutter:clamp(18px,3vw,42px);--mc-deep:#061f34;--mc-deep2:#0b4267;--mc-aqua:#08a1c7;--mc-red2:#df2a1d;--mc-green2:#16805f;--mc-paper:#f4f7f9;--mc-card:#fff;--mc-border:#d8e2e8;--mc-text:#102638;--mc-muted2:#5b7181;--mc-radius2:18px;--mc-shadow2:0 18px 48px rgba(6,31,52,.12)}
.mc-shell{width:min(calc(100% - (var(--mc-public-gutter) * 2)),var(--mc-public-width));margin-inline:auto}.mc-header{position:sticky;top:0;z-index:100;background:rgba(4,27,45,.98);border-bottom:2px solid var(--mc-aqua);box-shadow:0 5px 22px rgba(0,0,0,.12)}.mc-header-inner{width:min(calc(100% - (var(--mc-public-gutter) * 2)),var(--mc-public-width));min-height:82px;margin:auto;display:flex;align-items:center;gap:clamp(18px,2vw,34px)}.mc-brand{flex:0 0 auto}.mc-brand .broadcast-brand-main{font-size:clamp(1.4rem,2vw,2rem)}.mc-nav{margin-left:auto}.mc-nav>a,.mc-nav .nav-group-toggle{font-size:.84rem;letter-spacing:.035em}.mc-nav .active>a,.mc-nav .nav-group.active>.nav-group-toggle{color:#7fdcff}.mc-header-cta{white-space:nowrap;padding:.72rem 1rem}.mc-kicker{margin:0 0 .75rem;color:#8fd8ff;text-transform:uppercase;letter-spacing:.16em;font-size:.73rem;font-weight:900}.mc-kicker.dark{color:#127b9f}.mc-lead{font-size:clamp(1.02rem,1.55vw,1.25rem);line-height:1.7;color:#d8e7ef;max-width:760px}.mc-home-hero,.mc-directory-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 86% 20%,rgba(20,163,178,.38),transparent 31rem),linear-gradient(120deg,#061f34 0%,#0a4268 62%,#126750 100%)}.mc-home-hero:after,.mc-directory-hero:after{content:"";position:absolute;right:-12%;bottom:-55%;width:55vw;height:55vw;border:1px solid rgba(255,255,255,.1);border-radius:50%;box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.02)}.mc-home-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(440px,.95fr);align-items:center;gap:clamp(3rem,6vw,7rem);padding-block:clamp(4rem,7vw,7.2rem)}.mc-home-copy h1,.mc-directory-hero h1{margin:.2rem 0 1.25rem;font-size:clamp(3.4rem,7vw,6.8rem);line-height:.92;letter-spacing:-.065em;max-width:850px}.mc-proof{display:flex;flex-wrap:wrap;gap:.7rem 1.3rem;margin-top:1.8rem;font-weight:750;font-size:.9rem}.mc-proof span:before{content:"✓";color:#65e0ae;margin-right:.42rem}.mc-hero-collage{display:grid;grid-template-columns:1.35fr .9fr;grid-template-rows:1fr 1fr;gap:14px;min-height:480px}.mc-hero-collage a{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.28);border-radius:20px;background:#09263c;box-shadow:0 16px 40px rgba(0,0,0,.22)}.mc-hero-collage .mc-collage-main{grid-row:1/3}.mc-hero-collage img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.mc-hero-collage a:hover img{transform:scale(1.035)}.mc-hero-collage a:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(2,16,28,.95))}.mc-hero-collage span{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;color:#fff}.mc-hero-collage strong,.mc-hero-collage small{display:block}.mc-hero-collage strong{font-size:1.35rem}.mc-quickbar{position:relative;z-index:3;margin-top:-28px}.mc-quickbar-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:16px;box-shadow:var(--mc-shadow2);overflow:hidden}.mc-quickbar a{padding:1.25rem 1.35rem;text-decoration:none;border-right:1px solid var(--mc-border)}.mc-quickbar a:last-child{border:0}.mc-quickbar strong,.mc-quickbar span{display:block}.mc-quickbar strong{font-size:1.05rem;color:var(--mc-deep)}.mc-quickbar span{font-size:.82rem;color:var(--mc-muted2);margin-top:.2rem}.mc-section{width:min(calc(100% - (var(--mc-public-gutter) * 2)),var(--mc-public-width));margin:auto;padding-block:clamp(3.8rem,6vw,6rem)}.mc-section-soft{width:100%;max-width:none;padding-inline:max(var(--mc-public-gutter),calc((100vw - var(--mc-public-width))/2));background:var(--mc-paper)}.mc-section-heading{display:flex;justify-content:space-between;align-items:end;gap:3rem;margin-bottom:2rem}.mc-section-heading h2,.mc-cta h2,.mc-events-card h2{font-size:clamp(2rem,4vw,3.8rem);line-height:1;letter-spacing:-.045em;margin:.2rem 0}.mc-section-heading>p{max-width:620px;color:var(--mc-muted2);font-size:1.03rem}.mc-text-link{font-weight:900;text-decoration:none;white-space:nowrap}.mc-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.mc-feature-grid article{padding:1.8rem;border:1px solid var(--mc-border);border-radius:var(--mc-radius2);background:#fff;box-shadow:0 8px 25px rgba(6,31,52,.06)}.mc-feature-grid article>span{font-weight:950;color:var(--mc-aqua)}.mc-feature-grid h3{font-size:1.5rem;margin:.55rem 0}.mc-feature-grid p{color:var(--mc-muted2)}.mc-feature-grid a{font-weight:850;text-decoration:none}.mc-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.35rem}.mc-story-card{overflow:hidden;border:1px solid var(--mc-border);border-radius:var(--mc-radius2);background:#fff;box-shadow:0 10px 30px rgba(6,31,52,.07)}.mc-story-image{display:block;aspect-ratio:16/9;overflow:hidden}.mc-story-image img{height:100%;object-fit:cover;transition:transform .35s}.mc-story-card:hover img{transform:scale(1.035)}.mc-story-card>div{padding:1.35rem}.mc-story-card span{color:var(--mc-green2);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.mc-story-card h3{font-size:1.35rem;line-height:1.22;margin:.45rem 0}.mc-story-card p{color:var(--mc-muted2)}.mc-story-card a{font-weight:850;text-decoration:none}.mc-home-split{display:grid;grid-template-columns:1.4fr .6fr;gap:1.35rem}.mc-live-card{display:grid;grid-template-columns:1fr .9fr;overflow:hidden;border-radius:var(--mc-radius2);background:linear-gradient(130deg,var(--mc-deep),var(--mc-deep2));color:#fff;box-shadow:var(--mc-shadow2)}.mc-live-card>div{padding:clamp(2rem,4vw,3.5rem)}.mc-live-card h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1;letter-spacing:-.04em;margin:.3rem 0 1rem}.mc-live-card p{color:#d8e7ef}.mc-live-card img{height:100%;object-fit:cover}.mc-events-card{padding:1.7rem;border:1px solid var(--mc-border);border-radius:var(--mc-radius2);background:#fff;box-shadow:0 10px 30px rgba(6,31,52,.07)}.mc-events-card>a:not(.mc-text-link){display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--mc-border);color:var(--mc-text);text-decoration:none}.mc-events-card time{display:grid;place-items:center;width:58px;height:62px;border-radius:10px;background:#eef5f8;color:var(--mc-deep)}.mc-events-card time b{font-size:.65rem;color:var(--mc-red2)}.mc-events-card time strong{font-size:1.45rem;line-height:1}.mc-events-card span strong,.mc-events-card span small{display:block}.mc-events-card span small{color:var(--mc-muted2)}.mc-events-card .mc-text-link{display:inline-block;margin-top:1rem}.mc-cta{width:min(calc(100% - (var(--mc-public-gutter) * 2)),var(--mc-public-width));margin:0 auto 4rem;padding:clamp(2rem,4vw,3.4rem);display:flex;justify-content:space-between;align-items:center;gap:2rem;border-radius:var(--mc-radius2);background:linear-gradient(115deg,#061f34,#0b557d);color:#fff}.mc-cta p:not(.mc-kicker){color:#d8e7ef;margin-bottom:0}.mc-newsletter{padding:0;background:#0d6077}.mc-newsletter-inner{width:min(calc(100% - (var(--mc-public-gutter) * 2)),var(--mc-public-width));margin:auto;padding-block:2.4rem;display:flex;justify-content:space-between;align-items:center;gap:2rem}.mc-newsletter-actions{display:flex;gap:.8rem;flex-wrap:wrap}.mc-footer .footer-grid,.mc-footer .footer-bottom{width:min(calc(100% - (var(--mc-public-gutter) * 2)),var(--mc-public-width));max-width:var(--mc-public-width)}.mc-directory-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.55fr);gap:clamp(2.5rem,6vw,6rem);align-items:center;padding-block:clamp(3.5rem,6vw,6rem)}.mc-directory-hero h1{font-size:clamp(3rem,6vw,5.8rem)}.mc-directory-hero-image{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:22px;border:1px solid rgba(255,255,255,.3);box-shadow:0 18px 50px rgba(0,0,0,.25)}.mc-directory-hero-image img{height:100%;object-fit:cover}.mc-directory-hero-image:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(2,16,28,.92))}.mc-directory-hero-image span{position:absolute;z-index:2;left:20px;bottom:18px;font-size:1.35rem;font-weight:900}.mc-directory-section{padding-block:2.5rem 5rem;background:var(--mc-paper)}.mc-directory-tabs{margin:0 0 2rem;padding:.4rem;display:inline-flex;gap:.25rem;border:1px solid var(--mc-border);border-radius:12px;background:#fff;box-shadow:0 6px 20px rgba(6,31,52,.05)}.mc-directory-tabs a{border:0;border-radius:8px;padding:.68rem 1rem}.mc-directory-tabs a.active{background:var(--mc-deep);color:#fff}.mc-directory-summary{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:1.5rem}.mc-directory-summary h2{font-size:clamp(2rem,3vw,3rem);line-height:1;margin:.2rem 0}.mc-directory-summary>p{color:var(--mc-muted2)}.mc-directory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem}.mc-profile-card{overflow:hidden;border-radius:16px;border:1px solid var(--mc-border);box-shadow:0 10px 30px rgba(6,31,52,.07);transition:transform .2s,box-shadow .2s}.mc-profile-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(6,31,52,.12)}.mc-profile-card .profile-cover{aspect-ratio:16/9}.mc-profile-card .profile-card-body{padding:1.25rem}.mc-profile-card .profile-card-body>p:last-of-type{color:var(--mc-muted2)}.mc-verified{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#dff5eb;color:var(--mc-green2);font-size:.75rem}.mc-directory-empty{grid-column:1/-1;padding:4rem;border:1px dashed #aebdc7;border-radius:16px;text-align:center;background:#fff}
@media(max-width:1120px){.mc-home-hero-grid{grid-template-columns:1fr .85fr}.mc-hero-collage{min-height:420px}.mc-header-inner{gap:14px}.mc-nav>a,.mc-nav .nav-group-toggle{font-size:.76rem}.mc-header-cta{font-size:.76rem}.mc-directory-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.mc-header-inner{min-height:70px}.mc-nav{margin-left:0}.mc-home-hero-grid,.mc-directory-hero-grid{grid-template-columns:1fr}.mc-home-copy h1,.mc-directory-hero h1{max-width:760px}.mc-hero-collage{min-height:380px}.mc-quickbar{margin-top:0}.mc-quickbar-grid{grid-template-columns:1fr 1fr;border-radius:0}.mc-quickbar a:nth-child(2){border-right:0}.mc-quickbar a:nth-child(-n+2){border-bottom:1px solid var(--mc-border)}.mc-section-heading,.mc-directory-summary{align-items:start;flex-direction:column;gap:.7rem}.mc-feature-grid,.mc-story-grid{grid-template-columns:1fr 1fr}.mc-story-grid article:last-child{grid-column:1/-1}.mc-home-split{grid-template-columns:1fr}.mc-live-card{min-height:360px}.mc-cta,.mc-newsletter-inner{align-items:flex-start;flex-direction:column}.mc-directory-hero-image{max-width:650px}.mc-directory-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.mc-home-hero-grid,.mc-directory-hero-grid{padding-block:3rem}.mc-home-copy h1,.mc-directory-hero h1{font-size:clamp(2.75rem,15vw,4.2rem)}.mc-hero-collage{grid-template-columns:1fr 1fr;grid-template-rows:240px 180px;min-height:0}.mc-hero-collage .mc-collage-main{grid-column:1/3;grid-row:auto}.mc-quickbar-grid,.mc-feature-grid,.mc-story-grid,.mc-directory-grid{grid-template-columns:1fr}.mc-quickbar a{border-right:0!important;border-bottom:1px solid var(--mc-border)}.mc-story-grid article:last-child{grid-column:auto}.mc-live-card{grid-template-columns:1fr}.mc-live-card img{height:230px}.mc-directory-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.mc-directory-tabs a{text-align:center}.mc-cta{margin-bottom:2rem}.mc-newsletter-actions{width:100%}.mc-newsletter-actions a{width:100%}.mc-directory-empty{padding:2.5rem 1.3rem}}
/* ==========================================================
MICHIGAN CHAT PUBLIC SITE — EFFECTIVE COMPACT/WIDE OVERRIDES
Targets the actual mc-* classes used by the public pages.
========================================================== */
:root{
--mc-public-width: 1600px;
--mc-public-gutter: clamp(14px, 1.6vw, 28px);
}
body{
font-size: 15px;
line-height: 1.5;
}
.mc-shell,
.mc-header-inner,
.mc-newsletter-inner,
.mc-footer .footer-grid,
.mc-footer .footer-bottom,
.mc-cta{
width: min(calc(100% - (var(--mc-public-gutter) * 2)), var(--mc-public-width));
max-width: var(--mc-public-width);
}
.mc-header-inner{
min-height: 70px;
gap: 16px;
}
.mc-brand .broadcast-brand-main{
font-size: clamp(1.25rem, 1.65vw, 1.7rem);
}
.mc-nav > a,
.mc-nav .nav-group-toggle{
font-size: .78rem;
letter-spacing: .025em;
padding-left: .42rem;
padding-right: .42rem;
}
.mc-header-cta{
padding: .58rem .82rem;
font-size: .76rem;
}
.mc-home-hero-grid{
grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
gap: clamp(1.6rem, 3vw, 3.5rem);
padding-block: clamp(2.8rem, 4.5vw, 4.8rem);
}
.mc-home-copy h1,
.mc-directory-hero h1{
margin: .15rem 0 .85rem;
font-size: clamp(2.65rem, 4.8vw, 5rem);
line-height: .96;
letter-spacing: -.052em;
max-width: 940px;
}
.mc-lead{
max-width: 820px;
font-size: clamp(.96rem, 1.15vw, 1.08rem);
line-height: 1.55;
}
.mc-kicker{
margin-bottom: .5rem;
font-size: .67rem;
}
.mc-proof{
gap: .45rem 1rem;
margin-top: 1.1rem;
font-size: .82rem;
}
.mc-home-copy .actions{
margin-top: 1rem;
}
.mc-home-copy .actions a,
.mc-cta .actions a{
min-height: 40px;
padding: .65rem .95rem;
font-size: .78rem;
}
.mc-hero-collage{
min-height: 340px;
gap: 10px;
}
.mc-hero-collage a{
border-radius: 14px;
}
.mc-hero-collage span{
left: 14px;
right: 14px;
bottom: 12px;
}
.mc-hero-collage strong{
font-size: 1.05rem;
}
.mc-hero-collage small{
font-size: .75rem;
}
.mc-quickbar{
margin-top: -18px;
}
.mc-quickbar-grid{
border-radius: 12px;
}
.mc-quickbar a{
padding: .85rem 1rem;
}
.mc-quickbar strong{
font-size: .9rem;
}
.mc-quickbar span{
font-size: .78rem;
}
.mc-section{
padding-block: 2.4rem;
}
.mc-section-heading{
margin-bottom: 1.15rem;
}
.mc-section-heading h2,
.mc-home-split h2,
.mc-cta h2,
.mc-newsletter h2,
.mc-directory-summary h2{
font-size: clamp(1.7rem, 2.6vw, 2.65rem);
line-height: 1.05;
}
.mc-section-heading p,
.mc-home-split p,
.mc-cta p,
.mc-newsletter p,
.mc-directory-summary p{
font-size: .92rem;
line-height: 1.5;
}
.mc-feature-grid{
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
.mc-feature-grid article,
.mc-story-card,
.mc-events-card,
.mc-live-card{
border-radius: 13px;
}
.mc-feature-grid article{
padding: 1rem;
}
.mc-feature-grid h3,
.mc-story-card h3,
.mc-events-card h3{
font-size: 1.05rem;
}
.mc-feature-grid p,
.mc-story-card p,
.mc-events-card p{
font-size: .86rem;
line-height: 1.45;
}
.mc-story-grid{
gap: 1rem;
}
.mc-story-image{
aspect-ratio: 16 / 8.5;
}
.mc-story-card > div:not(.mc-story-image){
padding: 1rem;
}
.mc-home-split{
gap: 1rem;
}
.mc-live-card{
min-height: 285px;
}
.mc-live-card > div,
.mc-events-card{
padding: 1.25rem;
}
.mc-cta{
margin-bottom: 2.5rem;
padding: 1.6rem 1.8rem;
border-radius: 14px;
}
.mc-newsletter-inner{
padding-block: 1.5rem;
}
.mc-footer .footer-grid{
padding-top: 2rem;
gap: 1.6rem;
}
.mc-footer .footer-bottom{
margin-top: 1.4rem;
}
.mc-directory-hero-grid{
grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
gap: clamp(1.5rem, 3vw, 3.5rem);
padding-block: clamp(2.5rem, 4vw, 4rem);
}
.mc-directory-hero h1{
font-size: clamp(2.5rem, 4.5vw, 4.4rem);
}
.mc-directory-hero-image{
max-height: 330px;
border-radius: 14px;
}
.mc-directory-section{
padding-block: 1.8rem 3rem;
}
.mc-directory-tabs{
margin-bottom: 1.25rem;
}
.mc-directory-tabs a{
padding: .55rem .8rem;
font-size: .8rem;
}
.mc-directory-summary{
margin-bottom: 1rem;
}
.mc-directory-grid{
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
.mc-profile-card{
border-radius: 12px;
}
.mc-profile-card .profile-cover{
aspect-ratio: 16 / 8;
}
.mc-profile-card .profile-card-body{
padding: .9rem;
}
.mc-profile-card .profile-card-body h2,
.mc-profile-card .profile-card-body h3{
font-size: 1rem;
}
.mc-profile-card .profile-card-body p{
font-size: .82rem;
line-height: 1.4;
}
/* Membership page compaction */
.membership-hero-inner{
width: min(calc(100% - (var(--mc-public-gutter) * 2)), var(--mc-public-width));
grid-template-columns: minmax(0, 1.15fr) minmax(340px, .75fr);
gap: clamp(1.5rem, 3vw, 3.2rem);
padding-top: 2.8rem;
padding-bottom: 2.8rem;
}
.membership-hero-copy h1{
font-size: clamp(2.65rem, 4.8vw, 4.9rem);
line-height: .96;
}
.membership-hero-copy > p:not(.broadcast-kicker){
max-width: 820px;
font-size: 1rem;
line-height: 1.55;
}
.membership-hero-visual{
min-height: 320px;
}
.membership-page{
width: min(calc(100% - (var(--mc-public-gutter) * 2)), var(--mc-public-width));
max-width: var(--mc-public-width);
padding: 2rem 0 3rem;
}
.membership-intro{
gap: 2rem;
margin-bottom: 1.15rem;
}
.membership-intro h2,
.membership-explainer h2,
.membership-final-cta h2{
font-size: clamp(1.75rem, 2.6vw, 2.6rem);
}
.membership-grid{
gap: .85rem;
}
.membership-card{
border-radius: 13px;
}
.membership-card-image{
height: 105px;
}
.membership-card-body{
padding: 1rem;
}
.membership-card h3{
font-size: 1.3rem;
}
.membership-card-summary{
min-height: 3.4rem;
margin-top: .4rem;
font-size: .84rem;
line-height: 1.4;
}
.membership-price{
margin: .55rem 0 .65rem;
font-size: 2.15rem;
}
.membership-feature-list{
gap: .32rem;
margin-bottom: .85rem;
}
.membership-feature-list li{
padding-left: 1.25rem;
font-size: .82rem;
line-height: 1.25;
}
.membership-card-button{
min-height: 38px;
font-size: .72rem;
}
.membership-explainer{
margin-top: 1.6rem;
padding: 1.4rem;
gap: 1.6rem;
}
.membership-process{
gap: .55rem;
}
.membership-process > div{
padding: .7rem .8rem .7rem 3.4rem;
}
.membership-final-cta{
margin-top: 1rem;
padding: 1.35rem 1.5rem;
}
@media (max-width: 1180px){
.mc-feature-grid,
.mc-directory-grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mc-home-hero-grid{
grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
}
}
@media (max-width: 900px){
.mc-feature-grid,
.mc-directory-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mc-home-hero-grid,
.mc-directory-hero-grid,
.membership-hero-inner{
grid-template-columns: 1fr;
}
.mc-hero-collage,
.membership-hero-visual{
min-height: 300px;
}
}
@media (max-width: 620px){
:root{
--mc-public-gutter: 14px;
}
.mc-feature-grid,
.mc-directory-grid{
grid-template-columns: 1fr;
}
.mc-home-copy h1,
.mc-directory-hero h1,
.membership-hero-copy h1{
font-size: clamp(2.25rem, 12vw, 3.2rem);
}
.mc-home-hero-grid,
.mc-directory-hero-grid,
.membership-hero-inner{
padding-block: 2.3rem;
}
.mc-section{
padding-block: 1.8rem;
}
}
/* ========================================================================
STEP 2 FINAL — COMPLETE SHARED PUBLIC VISUAL SYSTEM
Preserves the existing application/form framework while standardizing
public page width, typography, navigation, cards, forms, tables and mobile.
======================================================================== */
:root {
--mc-public-width: 1600px;
--mc-public-gutter: clamp(14px, 2vw, 30px);
--mc-content-width: 1600px;
--mc-form-width: 820px;
--mc-form-wide: 1080px;
--mc-control-height: 44px;
--mc-radius: 12px;
--mc-small-radius: 8px;
--mc-section-space: clamp(28px, 4vw, 58px);
}
html { overflow-x: hidden; }
body { font-size: 15px; overflow-x: hidden; }
main, .broadcast-page, .mc-page { min-width: 0; }
/* One controlled width system for every public page. */
.mc-container,
.container,
.section,
.broadcast-page,
.broadcast-section,
.membership-page,
.mc-section-inner,
.mc-directory-section-inner,
.hero-inner,
.page-hero > div {
width: min(calc(100% - (var(--mc-public-gutter) * 2)), var(--mc-public-width));
max-width: var(--mc-public-width);
margin-inline: auto;
}
.section,
.broadcast-page,
.mc-section {
padding-top: var(--mc-section-space);
padding-bottom: var(--mc-section-space);
}
.section.narrow,
.narrow-page,
.prose,
.rules-panel {
width: min(calc(100% - (var(--mc-public-gutter) * 2)), 900px);
max-width: 900px;
margin-inline: auto;
}
/* Compact shared typography. */
h1, h2, h3, p { overflow-wrap: anywhere; }
.page-hero { padding: clamp(42px, 5vw, 72px) 0; }
.page-hero h1,
.hero h1,
.broadcast-page h1 {
font-size: clamp(2.25rem, 4.4vw, 4.6rem);
line-height: .98;
letter-spacing: -.045em;
}
.section-head h2,
.section h2,
.mc-section h2 {
font-size: clamp(1.7rem, 2.8vw, 2.8rem);
line-height: 1.08;
}
/* Shared navigation remains on one line on normal desktop widths. */
.broadcast-header-inner {
width: min(calc(100% - (var(--mc-public-gutter) * 2)), var(--mc-public-width));
max-width: var(--mc-public-width);
min-height: 64px;
padding-inline: 0;
gap: clamp(12px, 1.5vw, 24px);
}
.broadcast-brand-main { font-size: clamp(20px, 1.7vw, 27px); }
.broadcast-nav { gap: clamp(8px, 1vw, 16px); min-width: 0; }
.broadcast-nav a { font-size: 12px; white-space: nowrap; }
.watch-live-button { padding: .68rem .85rem; }
/* Shared cards and panels. */
.panel,
.broadcast-panel,
.media-card,
.profile-card,
.membership-card,
.rules-panel,
.cta-card {
max-width: 100%;
min-width: 0;
border-radius: var(--mc-radius);
}
.panel,
.broadcast-panel,
.rules-panel { padding: clamp(18px, 2.4vw, 30px); }
.card-grid,
.directory-grid,
.membership-grid,
.profile-layout,
.dashboard-grid,
.live-feature-layout,
.form-layout,
.intro-grid {
min-width: 0;
gap: clamp(14px, 2vw, 24px);
}
.card-grid > *,
.directory-grid > *,
.membership-grid > *,
.profile-layout > *,
.dashboard-grid > *,
.live-feature-layout > *,
.form-layout > *,
.intro-grid > * { min-width: 0; }
/* Complete public form system. */
form,
fieldset { min-width: 0; max-width: 100%; }
fieldset { border: 0; margin: 0; padding: 0; }
.form-layout {
grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
align-items: start;
}
form.form,
form.broadcast-form,
form.agree-form,
form#profile-action-form {
width: min(100%, var(--mc-form-width));
max-width: 100%;
margin: 0;
}
form.form,
form.agree-form {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 14px !important;
}
form.form.panel { padding: clamp(20px, 3vw, 34px); }
form.broadcast-form,
form.broadcast-form.inline-form {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
width: min(100%, var(--mc-form-wide));
align-items: start;
}
form.form > label,
form.broadcast-form > label,
form#profile-action-form > label,
form.agree-form > label {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 6px;
min-width: 0;
margin: 0 !important;
color: #173a59;
font-size: .9rem;
font-weight: 800;
line-height: 1.3;
}
.form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form select,
.form textarea,
.broadcast-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.broadcast-form select,
.broadcast-form textarea,
#profile-action-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#profile-action-form select,
#profile-action-form textarea {
display: block;
width: 100% !important;
max-width: 100%;
min-width: 0;
min-height: var(--mc-control-height);
margin: 0 !important;
padding: 10px 13px;
border: 1px solid #b8c6d1;
border-radius: var(--mc-small-radius);
background: #fff;
color: #142331;
font: inherit;
line-height: 1.35;
}
.form textarea,
.broadcast-form textarea,
#profile-action-form textarea {
min-height: 125px;
resize: vertical;
}
.form input:focus,
.form select:focus,
.form textarea:focus,
.broadcast-form input:focus,
.broadcast-form select:focus,
.broadcast-form textarea:focus,
#profile-action-form input:focus,
#profile-action-form select:focus,
#profile-action-form textarea:focus {
outline: 0;
border-color: #0879b7;
box-shadow: 0 0 0 4px rgba(8,121,183,.14);
}
form.broadcast-form > .full-row,
form.broadcast-form > p,
form.broadcast-form > .notice,
form.broadcast-form > .alert,
form.broadcast-form > fieldset,
form.broadcast-form > h1,
form.broadcast-form > h2,
form.broadcast-form > h3 {
grid-column: 1 / -1;
}
.full-row { grid-column: 1 / -1; }
.checkbox-line,
.check-row,
.certification-check {
display: flex !important;
align-items: flex-start;
gap: 10px !important;
}
.form input[type="checkbox"],
.broadcast-form input[type="checkbox"],
.agree-form input[type="checkbox"],
.check-row input[type="checkbox"] {
flex: 0 0 18px;
width: 18px !important;
height: 18px;
min-height: 0;
margin: 3px 0 0 !important;
accent-color: #0879b7;
}
form.inline-action {
display: inline-flex !important;
align-items: center;
flex-wrap: wrap;
gap: 8px !important;
width: auto !important;
}
form.inline-action input,
form.inline-action select { width: auto !important; min-width: 150px; }
.form button,
.form .button,
.broadcast-form button,
.broadcast-form .button,
.agree-form button,
.agree-form .button {
min-height: 42px;
}
.notice,
.alert {
width: 100%;
margin: 0 0 14px;
padding: 12px 14px;
border-radius: var(--mc-small-radius);
}
/* Tables never push the entire page wider than the viewport. */
.table-wrap,
.admin-table-wrap {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table { width: 100%; min-width: 640px; border-collapse: collapse; }
th, td { padding: 10px 12px; vertical-align: top; }
/* Profile, live, room and chat application surfaces. */
.profile-layout { grid-template-columns: minmax(0, 2fr) minmax(280px, .8fr); }
.live-feature-layout { grid-template-columns: minmax(0, 2fr) minmax(280px, .75fr); }
.webrtc-name-row > * { min-width: 0; }
.webrtc-stage video,
.feature-video video,
.video-frame video { max-width: 100%; }
dialog { max-width: min(760px, calc(100vw - 28px)); }
/* Footer uses the same wide container and tighter spacing. */
.site-footer,
.mc-footer {
padding-left: var(--mc-public-gutter);
padding-right: var(--mc-public-gutter);
}
.footer-grid,
.mc-footer-grid,
.footer-bottom,
.mc-footer-bottom {
width: min(100%, var(--mc-public-width));
max-width: var(--mc-public-width);
margin-inline: auto;
}
.footer-grid { gap: clamp(22px, 3vw, 46px); }
@media (max-width: 1120px) {
.broadcast-nav { display: none; }
.nav-toggle { display: inline-flex; }
.broadcast-nav.open {
display: flex;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
padding: 16px var(--mc-public-gutter);
background: #071829;
}
}
@media (max-width: 900px) {
.form-layout,
.intro-grid,
.profile-layout,
.live-feature-layout,
.dashboard-grid {
grid-template-columns: minmax(0, 1fr);
}
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
:root { --mc-public-gutter: 14px; }
body { font-size: 14.5px; }
form.form,
form.broadcast-form,
form.broadcast-form.inline-form,
form.agree-form,
dialog form#profile-action-form {
grid-template-columns: minmax(0, 1fr) !important;
width: 100%;
}
form.broadcast-form > *,
dialog form#profile-action-form > * { grid-column: 1 !important; }
form.inline-action {
display: grid !important;
grid-template-columns: minmax(0, 1fr);
width: 100% !important;
}
form.inline-action input,
form.inline-action select,
form.inline-action button,
form.inline-action .button { width: 100% !important; }
.footer-grid { grid-template-columns: minmax(0, 1fr); }
table { min-width: 560px; }
}
/* =========================================================
STEP 2 FINAL COMPACT OVERRIDE
Corrects oversized content, excessive width and spacing.
Keeps all existing form and application rules intact.
========================================================= */
:root {
--mc-public-width: 1240px;
--mc-public-gutter: clamp(16px, 2.2vw, 28px);
--mc-section-space: clamp(28px, 4vw, 48px);
}
html { font-size: 15px; }
body { font-size: 15px; line-height: 1.5; }
.mc-shell,
.mc-header-inner,
.mc-section,
.mc-section-inner,
.mc-newsletter-inner,
.mc-footer .footer-grid,
.mc-footer .footer-bottom,
.footer-grid,
.footer-bottom,
.section,
.broadcast-page,
.hero-inner,
.page-hero > div,
.profile-hero-overlay,
.broadcast-header-inner {
width: min(calc(100% - (var(--mc-public-gutter) * 2)), var(--mc-public-width));
max-width: var(--mc-public-width);
margin-inline: auto;
}
/* Header */
.mc-header-inner { min-height: 66px; gap: 16px; }
.mc-brand .broadcast-brand-main { font-size: 1.38rem; }
.mc-nav > a,
.mc-nav .nav-group-toggle { font-size: .76rem; letter-spacing: .02em; }
.mc-header-cta { padding: .56rem .78rem; font-size: .76rem; }
/* Home and directory heroes */
.mc-home-hero-grid,
.mc-directory-hero-grid {
grid-template-columns: minmax(0, 1.08fr) minmax(340px, .72fr);
gap: clamp(28px, 4vw, 54px);
padding-block: clamp(34px, 5vw, 64px);
}
.mc-home-copy h1,
.mc-directory-hero h1 {
max-width: 720px;
margin: .15rem 0 .9rem;
font-size: clamp(2.55rem, 5vw, 4.7rem);
line-height: .98;
letter-spacing: -.05em;
}
.mc-lead {
max-width: 680px;
font-size: clamp(.98rem, 1.3vw, 1.12rem);
line-height: 1.55;
}
.mc-kicker { margin-bottom: .45rem; font-size: .67rem; }
.mc-proof { margin-top: 1.15rem; gap: .5rem 1rem; font-size: .82rem; }
.mc-hero-collage { min-height: 330px; gap: 10px; }
.mc-hero-collage a { border-radius: 14px; }
.mc-hero-collage strong { font-size: 1.05rem; }
.mc-directory-hero-image { max-width: 440px; justify-self: end; border-radius: 15px; }
.mc-directory-hero-image span { font-size: 1.05rem; }
/* Quick links and page sections */
.mc-quickbar { margin-top: -18px; }
.mc-quickbar a { padding: .88rem 1rem; }
.mc-quickbar strong { font-size: .94rem; }
.mc-quickbar span { font-size: .76rem; }
.mc-section { padding-block: var(--mc-section-space); }
.mc-section-heading { gap: 24px; margin-bottom: 1.25rem; }
.mc-section-heading h2,
.mc-cta h2,
.mc-events-card h2,
.mc-directory-summary h2,
.mc-section h2 {
font-size: clamp(1.7rem, 3vw, 2.65rem);
line-height: 1.05;
letter-spacing: -.035em;
}
.mc-section-heading > p,
.mc-section-heading p { max-width: 560px; font-size: .95rem; }
/* Cards */
.mc-feature-grid,
.mc-story-grid,
.mc-directory-grid { gap: 16px; }
.mc-feature-grid article { padding: 1.2rem; border-radius: 13px; }
.mc-feature-grid h3 { margin: .4rem 0; font-size: 1.22rem; }
.mc-feature-grid p,
.mc-story-card p,
.mc-profile-card p { font-size: .91rem; }
.mc-story-card,
.mc-profile-card { border-radius: 13px; }
.mc-story-card > div,
.mc-profile-card .profile-card-body { padding: 1rem; }
.mc-story-card h3,
.mc-profile-card h2 { font-size: 1.15rem; }
.mc-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mc-directory-section { padding-block: 28px 46px; }
.mc-directory-tabs { margin-bottom: 1.2rem; }
.mc-directory-summary { margin-bottom: 1rem; }
/* Live, CTA and newsletter */
.mc-home-split { gap: 16px; }
.mc-live-card > div { padding: clamp(22px, 3vw, 34px); }
.mc-live-card h2 { font-size: clamp(1.75rem, 3vw, 2.7rem); }
.mc-events-card { padding: 1.2rem; }
.mc-events-card > a:not(.mc-text-link) { padding: .75rem 0; }
.mc-cta { margin-bottom: 34px; padding: clamp(22px, 3vw, 34px); }
.mc-newsletter-inner { padding-block: 1.65rem; }
/* Buttons */
.btn,
.button,
.blue-button,
.red-button,
.mc-button,
.mc-header-cta {
min-height: 38px;
padding: .62rem .9rem;
font-size: .88rem;
}
/* Forms remain contained and compact */
.narrow-page { max-width: 720px; }
.form,
.broadcast-form,
.agree-form,
.panel,
.broadcast-panel { font-size: .94rem; }
.form input,
.form select,
.form textarea,
.broadcast-form input,
.broadcast-form select,
.broadcast-form textarea,
.agree-form input,
.agree-form select,
.agree-form textarea {
min-height: 40px;
padding: .62rem .72rem;
}
.form textarea,
.broadcast-form textarea,
.agree-form textarea { min-height: 112px; }
.panel,
.broadcast-panel { padding: 1.1rem; }
/* Footer */
.site-footer,
.mc-footer { font-size: .88rem; }
.footer-grid { gap: 24px; }
@media (min-width: 1500px) {
:root { --mc-public-width: 1320px; }
}
@media (max-width: 1000px) {
.mc-home-hero-grid,
.mc-directory-hero-grid { grid-template-columns: 1fr; }
.mc-hero-collage { min-height: 300px; }
.mc-directory-hero-image { justify-self: start; max-width: 520px; }
.mc-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
:root { --mc-public-gutter: 14px; }
html, body { font-size: 14.5px; }
.mc-header-inner { min-height: 60px; }
.mc-home-hero-grid,
.mc-directory-hero-grid { padding-block: 28px; }
.mc-home-copy h1,
.mc-directory-hero h1 { font-size: clamp(2.2rem, 12vw, 3.35rem); }
.mc-hero-collage { min-height: 0; grid-template-rows: 190px 140px; }
.mc-section { padding-block: 30px; }
.mc-directory-grid { grid-template-columns: 1fr; }
.mc-cta { margin-bottom: 24px; }
}
/* =========================================================
STEP 2 HEADER AND FOOTER WIDTH CORRECTION
Keeps full-width background bands while containing all
header, newsletter and footer content to a readable width.
========================================================= */
:root {
--mc-frame-width: 1100px;
--mc-frame-gutter: clamp(18px, 2.4vw, 30px);
}
/* Header content — background stays full width, content does not */
.broadcast-header-inner,
.mc-header-inner {
width: min(calc(100% - (var(--mc-frame-gutter) * 2)), var(--mc-frame-width)) !important;
max-width: var(--mc-frame-width) !important;
margin-inline: auto !important;
padding-inline: 0 !important;
}
/* Newsletter content — prevent text and buttons from touching edges */
.newsletter,
.mc-newsletter {
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
}
.newsletter > div,
.mc-newsletter-inner {
width: min(calc(100% - (var(--mc-frame-gutter) * 2)), var(--mc-frame-width)) !important;
max-width: var(--mc-frame-width) !important;
margin-inline: auto !important;
padding-inline: 0 !important;
}
/* Legacy newsletter markup without an inner wrapper */
.newsletter:not(:has(> div)) {
padding-left: max(var(--mc-frame-gutter), calc((100vw - var(--mc-frame-width)) / 2)) !important;
padding-right: max(var(--mc-frame-gutter), calc((100vw - var(--mc-frame-width)) / 2)) !important;
}
/* Footer content — background remains full bleed */
.site-footer,
.mc-footer {
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
}
.footer-grid,
.footer-bottom,
.mc-footer .footer-grid,
.mc-footer .footer-bottom {
width: min(calc(100% - (var(--mc-frame-gutter) * 2)), var(--mc-frame-width)) !important;
max-width: var(--mc-frame-width) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.footer-grid,
.mc-footer .footer-grid {
grid-template-columns: 1.45fr repeat(3, minmax(135px, .75fr)) !important;
gap: clamp(24px, 3vw, 42px) !important;
}
.footer-grid p {
max-width: 320px !important;
}
.footer-bottom,
.mc-footer .footer-bottom {
margin-top: 28px !important;
}
@media (max-width: 900px) {
:root { --mc-frame-width: 760px; }
.footer-grid,
.mc-footer .footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 620px) {
:root { --mc-frame-gutter: 16px; }
.footer-grid,
.mc-footer .footer-grid {
grid-template-columns: 1fr !important;
}
.newsletter,
.mc-newsletter-inner {
align-items: flex-start !important;
}
}
/* =========================================================
STEP 2 FINAL VISUAL REFINEMENT — JULY 2026
Tighter header, smaller collage, shorter category bar,
and reduced secondary heading scale.
========================================================= */
:root {
--mc-frame-width: 1100px;
}
/* Header refinement */
.mc-header-inner,
.broadcast-header-inner {
min-height: 60px !important;
gap: 13px !important;
}
.mc-brand .broadcast-brand-main {
font-size: 1.28rem !important;
}
.mc-brand small,
.broadcast-brand small {
margin-top: .08rem !important;
font-size: .62rem !important;
}
.mc-nav {
gap: .72rem !important;
}
.mc-nav > a,
.mc-nav .nav-group-toggle {
padding-inline: .28rem !important;
font-size: .72rem !important;
}
.mc-header-cta {
min-height: 36px !important;
padding: .52rem .72rem !important;
font-size: .72rem !important;
}
/* Home hero balance */
.mc-home-hero-grid {
grid-template-columns: minmax(0, 1.16fr) minmax(320px, .64fr) !important;
gap: clamp(24px, 3.5vw, 44px) !important;
padding-block: clamp(30px, 4.3vw, 54px) !important;
}
.mc-hero-collage {
width: 91% !important;
min-height: 300px !important;
justify-self: end !important;
}
.mc-home-copy h1 {
font-size: clamp(2.45rem, 4.55vw, 4.25rem) !important;
}
.mc-lead {
max-width: 650px !important;
}
/* Shorter category bar */
.mc-quickbar {
margin-top: -14px !important;
}
.mc-quickbar-grid {
border-radius: 13px !important;
}
.mc-quickbar a {
padding: .72rem .9rem !important;
}
.mc-quickbar strong {
font-size: .88rem !important;
}
.mc-quickbar span {
margin-top: .12rem !important;
font-size: .71rem !important;
line-height: 1.35 !important;
}
/* Secondary content refinement */
.mc-section-heading {
margin-bottom: 1.05rem !important;
}
.mc-section-heading h2,
.mc-section h2 {
font-size: clamp(1.58rem, 2.7vw, 2.38rem) !important;
}
.mc-section-heading > p,
.mc-section-heading p {
font-size: .9rem !important;
line-height: 1.55 !important;
}
@media (max-width: 1000px) {
.mc-home-hero-grid {
grid-template-columns: 1fr !important;
}
.mc-hero-collage {
width: 100% !important;
max-width: 700px !important;
justify-self: start !important;
}
}
@media (max-width: 700px) {
.mc-header-inner,
.broadcast-header-inner {
min-height: 56px !important;
}
.mc-hero-collage {
min-height: 0 !important;
}
}
/* Public header member login actions */
.header-account-actions{display:flex;align-items:center;gap:.65rem;flex:0 0 auto}
.header-login-button{display:inline-flex;align-items:center;justify-content:center;padding:.78rem 1rem;border:1px solid rgba(255,255,255,.62);border-radius:4px;color:#fff;text-decoration:none;text-transform:uppercase;font-size:.78rem;font-weight:900;white-space:nowrap;background:rgba(255,255,255,.06)}
.header-login-button:hover,.header-login-button:focus-visible{background:#fff;color:#071829}
@media(max-width:1180px){.header-account-actions{gap:.45rem}.header-login-button,.header-account-actions .header-cta{padding-inline:.72rem;font-size:.72rem}}
@media(max-width:900px){.header-account-actions{margin-left:auto}.header-account-actions .header-cta{display:none}.header-login-button{display:inline-flex}}
@media(max-width:560px){.header-login-button{padding:.65rem .75rem;font-size:.7rem}}