:root{--bg:#07121b;--surface:#0c1b25;--surface2:#10242d;--border:#25404a;--text:#e7f3f3;--muted:#9aadb4;--green:#55f1b0}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}a{color:inherit;text-decoration:none}.wrap{max-width:1190px;margin:auto;padding:0 28px}.header{border-bottom:1px solid #18323b;background:#07121be8;position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.nav{display:flex;align-items:center;gap:35px;height:76px}.brand{font-size:22px;font-weight:900;letter-spacing:1px;white-space:nowrap}.brand-sub{font-size:10px;color:var(--muted);margin-left:10px;font-weight:700;letter-spacing:2px}.onair,.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green);margin-right:12px}.nav nav{display:flex;gap:28px;margin-left:auto;color:#b7c9ce;font-size:13px}.nav nav a:hover{color:var(--green)}.nav-cta{border:1px solid #315c56;padding:12px 16px;color:var(--green);font-size:12px;font-weight:800}.hero{min-height:660px;position:relative;padding-top:116px;padding-bottom:70px;overflow:hidden}.eyebrow,.section-kicker{font-family:Consolas,monospace;font-size:12px;letter-spacing:2px;color:var(--green);font-weight:700}.hero h1{font-size:clamp(54px,7vw,100px);line-height:.99;letter-spacing:-4px;margin:32px 0 24px;font-weight:900;position:relative;z-index:1}.hero h1 em{font-style:normal;color:var(--green)}.hero-copy{font-size:17px;line-height:1.8;color:#b2c5cb;max-width:570px;position:relative;z-index:1}.hero-copy strong{color:white}.actions{display:flex;gap:12px;margin-top:30px;position:relative;z-index:1}.button{padding:16px 20px;font-weight:800;font-size:13px;display:inline-flex;gap:20px;align-items:center}.primary{background:var(--green);color:#052119}.outline{border:1px solid #43636b}.telemetry{display:flex;gap:0;margin-top:72px;border-top:1px solid var(--border);max-width:700px;position:relative;z-index:1}.telemetry div{padding:22px 35px 0 0;margin-right:35px;border-right:1px solid var(--border)}.telemetry div:last-child{border:0}.telemetry small{display:block;font:10px Consolas,monospace;letter-spacing:2px;color:#819da7;margin-bottom:9px}.telemetry b{font:700 14px Consolas,monospace}.hero-art{position:absolute;width:480px;height:480px;right:-40px;top:85px;opacity:.65}.rings{position:absolute;inset:0;display:grid;place-items:center}.ring{position:absolute;border:1px solid #2e6b65;border-radius:50%}.r1{width:440px;height:440px}.r2{width:325px;height:325px}.r3{width:210px;height:210px;border-color:#50c49d}.crossh,.crossv{position:absolute;background:#2b5a59}.crossh{width:100%;height:1px}.crossv{height:100%;width:1px}.core{height:104px;width:104px;border-radius:50%;background:#123c37;border:1px solid var(--green);display:grid;place-items:center;color:var(--green);font:800 17px Consolas,monospace;box-shadow:0 0 55px #28d69a26}.scanlabel{position:absolute;right:55px;bottom:0;color:var(--green);font:11px Consolas,monospace;letter-spacing:3px}.section{padding:100px 0;border-top:1px solid #19323c;scroll-margin-top:75px}.about,.community{background:#0a1922}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px}.section h2{font-size:clamp(35px,4vw,56px);letter-spacing:-2px;line-height:1.1;margin:20px 0 0}.section h2 span{color:var(--green)}.about p{font-size:16px;line-height:1.9;color:#b4c5cb;margin:5px 0 20px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px}.section-heading p{color:var(--muted);font-size:14px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.project{border:1px solid var(--border);background:linear-gradient(145deg,#102630,#0b1a24);min-height:380px;padding:25px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}.project:hover,.resource:hover{transform:translateY(-3px);border-color:var(--green)}.featured{border-color:#377a67}.card-top{display:flex;justify-content:space-between;align-items:center}.tag,.domain{font:700 10px Consolas,monospace;letter-spacing:1px;color:var(--green)}.arrow{font-size:22px;color:var(--green)}.mesh-logo{width:145px;height:125px;object-fit:contain;object-position:left center;margin:22px 0 5px}.glyph{font-size:86px;color:var(--green);height:152px;display:flex;align-items:center;opacity:.85}.project h3{font-size:25px;margin:8px 0}.project p{font-size:14px;line-height:1.7;color:#b0c3c8;margin:0 0 26px}.domain{margin-top:auto}.community-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.resource{border:1px solid var(--border);padding:25px;min-height:145px;display:flex;align-items:center;gap:16px;background:#10232d;transition:transform .2s,border-color .2s}.resource-icon{font-size:35px;color:var(--green)}.resource strong{display:block;font-size:18px}.resource small{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:7px}.resource .arrow,.resource .muted{margin-left:auto}.muted{font:9px Consolas,monospace;color:#7e9b9f;text-align:right}footer{border-top:1px solid var(--border);padding:35px 0}.footer{display:flex;justify-content:space-between;align-items:center;gap:20px}.footer strong{font-size:23px;letter-spacing:2px}.footer p,.footer>span{font:12px Consolas,monospace;color:var(--muted)}.footer-dot{color:var(--green)}@media(max-width:900px){.hero-art{right:-210px;opacity:.22}.two-col{grid-template-columns:1fr;gap:15px}.cards,.community-grid{grid-template-columns:1fr 1fr}.nav-cta{display:none}}@media(max-width:620px){.wrap{padding:0 20px}.nav{height:65px;gap:12px}.brand{font-size:19px}.brand-sub{display:none}.nav nav{gap:13px;font-size:12px}.hero{padding-top:85px;min-height:auto}.hero h1{letter-spacing:-2px}.hero-copy{font-size:15px}.actions{flex-wrap:wrap}.telemetry{flex-wrap:wrap;margin-top:50px}.telemetry div{margin-right:12px;padding-right:12px}.section{padding:70px 0}.section-heading{display:block}.cards,.community-grid{grid-template-columns:1fr}.project{min-height:330px}.footer{display:block}}

/* SWLA Mesh Discord link */
.discord-link {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 16px;
    background: #5865f2;
    color: #ffffff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease;
}

.discord-link:hover {
    background: #4752c4;
}

/* SWLA Mesh project card links */
.project.featured .domain {
    display: block;
    width: fit-content;
    margin-top: 16px;
    color: #30d69b;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

.project.featured .discord-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-top: 18px;
    padding: 12px 18px;
    background: #5865f2;
    color: #ffffff;
    border: 1px solid #7289da;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    z-index: 2;
    visibility: visible;
    opacity: 1;
}

.project.featured .discord-link:hover {
    background: #4752c4;
    color: #ffffff;
}

/* Chargois Networks footer credit */
.powered-by {
    text-align: center;
    padding: 18px 15px 22px;
    margin-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: #8fa5b2;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
}


/* HF Radio Conditions */
.hf-section {
    background: #091722;
}

.hf-panel {
    background: #101e29;
    border: 1px solid #29414a;
    border-radius: 14px;
    padding: 25px;
    margin-top: 25px;
}

.hf-panel-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    color: #30d69b;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.hf-panel-header span {
    color: #8fa5b2;
}

.hf-widget-link {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hf-widget {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
}

.hf-credit {
    text-align: center;
    color: #8fa5b2;
    font-size: 12px;
    margin-top: 20px;
    line-height: 1.6;
}

/* KJ5INN Live Radio Conditions Dashboard */
.radio-dashboard {
    margin-top: 25px;
    padding: 24px;
    background: #101e29;
    border: 1px solid #29414a;
    border-radius: 14px;
}

.radio-dashboard-top,
.radio-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.radio-dashboard-top {
    color: #30d69b;
    font-size: 12px;
    letter-spacing: 1px;
}

#radio-status {
    color: #9fb3bf;
    font-size: 11px;
}

.solar-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 30px;
}

.solar-stat,
.band-tile {
    background: #172a38;
    border: 1px solid #2b4351;
    border-radius: 10px;
    padding: 16px;
}

.solar-stat .stat-label {
    color: #92aab8;
    font-size: 11px;
    letter-spacing: 1px;
}

.solar-stat .stat-value {
    color: #fff;
    font-size: 27px;
    font-weight: 800;
    margin-top: 7px;
}

.radio-section-title {
    margin: 26px 0 15px;
}

.radio-section-title h3 {
    color: #fff;
    font-size: 17px;
    margin: 0;
}

.radio-section-title span {
    color: #92aab8;
    font-size: 11px;
    letter-spacing: 1px;
}

.band-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.band-name {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
}

.band-frequency {
    color: #92aab8;
    font-size: 12px;
    margin: 5px 0 16px;
}

.band-condition {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    margin-top: 9px;
}

.band-condition span:first-child {
    color: #92aab8;
}

.rating-good { color: #30d69b; }
.rating-fair { color: #f0c45a; }
.rating-poor { color: #ff7777; }
.rating-unknown { color: #92aab8; }

.vhf-description {
    color: #9fb3bf;
    font-size: 12px;
    line-height: 1.6;
    margin-top: 12px;
}

.radio-data-note {
    color: #92aab8;
    font-size: 12px;
    line-height: 1.6;
    margin-top: 20px;
}

@media (max-width: 900px) {
    .band-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .radio-dashboard { padding: 15px; }
    .solar-stats { grid-template-columns: repeat(2, 1fr); }
    .band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .band-tile { padding: 12px; }
    .band-name { font-size: 21px; }
}

/* ==========================================
   KJ5INN MOBILE RESPONSIVE FIXES
   ========================================== */

html {
    overflow-x: clip;
}

body {
    min-width: 0;
    overflow-x: clip;
}

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

@media (max-width: 768px) {

    /* Main layout */
    .wrap,
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
        box-sizing: border-box;
    }

    section {
        max-width: 100%;
    }

    /* Header and navigation */
    header .wrap,
    header .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    header nav,
    header .nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 16px;
        width: 100%;
    }

    header nav a,
    header .nav a {
        font-size: 13px;
        white-space: nowrap;
    }

    /* Headings */
    h1 {
        font-size: clamp(32px, 9vw, 48px);
        line-height: 1.12;
        overflow-wrap: break-word;
    }

    h2 {
        font-size: clamp(26px, 7vw, 36px);
        line-height: 1.2;
        overflow-wrap: break-word;
    }

    h3 {
        overflow-wrap: break-word;
    }

    /* Project links and buttons */
    .project,
    .project.featured {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .project .domain,
    .project.featured .domain {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .project.featured .discord-link {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        box-sizing: border-box;
    }

    .mesh-logo {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Radio conditions */
    .radio-dashboard {
        padding: 16px;
        min-width: 0;
    }

    .radio-dashboard-top,
    .radio-section-title {
        gap: 8px;
    }

    .radio-section-title h3 {
        font-size: 15px;
    }

    .solar-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .band-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .solar-stat,
    .band-tile {
        min-width: 0;
        padding: 12px;
        overflow-wrap: anywhere;
    }

    .solar-stat .stat-value {
        font-size: 24px;
    }

    .band-name {
        font-size: 22px;
    }

    .band-condition {
        flex-wrap: wrap;
    }

    .band-condition strong {
        overflow-wrap: anywhere;
    }

    /* Footer */
    footer {
        text-align: center;
    }

    .powered-by {
        font-size: 11px;
        letter-spacing: 0.5px;
    }
}

@media (max-width: 380px) {

    .wrap,
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .radio-dashboard {
        padding: 12px;
    }

    .band-grid {
        gap: 8px;
    }

    .band-tile {
        padding: 10px;
    }

    .band-name {
        font-size: 20px;
    }

    .band-condition {
        font-size: 11px;
    }

    .vhf-description {
        font-size: 11px;
    }
}

/* KJ5INN HF Contest Calendar */
.contest-list {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.contest-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px;
    background: #172a38;
    border: 1px solid #2b4351;
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.2s;
}

.contest-event:hover {
    border-color: #30d69b;
}

.contest-event-info {
    min-width: 0;
}

.contest-event-name {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.contest-event-time {
    color: #9fb3bf;
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.5;
}

.contest-event-arrow {
    color: #30d69b;
    font-size: 20px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .contest-event {
        padding: 13px;
    }

    .contest-event-name {
        font-size: 14px;
    }

    .contest-event-time {
        font-size: 11px;
    }
}