/* MeteoA site stylesheet — updated 2026-03-18 v2 */

    :root {
      --bg-base:   #07080f;
      --bg-panel:  #0d0f1e;
      --bg-card:   #121524;
      --border:    rgba(0,200,255,0.12);
      --accent:    #00c8ff;
      --text:      #e8ecf5;
      --text-muted:#6b7a99;
      --font-head: 'Exo 2', sans-serif;
      --font-mono: 'DM Mono', monospace;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { background: var(--bg-base); color: var(--text); font-family: var(--font-head); line-height: 1.6; overflow-x: hidden; }
    body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; opacity: 0.35; }

    body > nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 60px; background: rgba(7,8,15,0.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
    .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .nav-logo img { height: 28px; }
    .nav-links { display: flex; gap: 32px; list-style: none; }
    .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; transition: color 0.2s; }
    .nav-links a:hover, .nav-links a.active { color: var(--accent); }
    .nav-cta { background: transparent; border: 1px solid var(--accent); color: var(--accent); padding: 8px 20px; border-radius: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; transition: background 0.2s, color 0.2s; }
    .nav-cta:hover { background: var(--accent); color: var(--bg-base); }

    /* ARTICLE LAYOUT */
    .article-wrap { max-width: 760px; margin: 0 auto; padding: 120px 40px 100px; position: relative; z-index: 1; }

    .breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-bottom: 32px; display: flex; gap: 8px; align-items: center; }
    .breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
    .breadcrumb a:hover { color: var(--accent); }
    .breadcrumb span { opacity: 0.4; }

    .article-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
    .atag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; border: 1px solid; }
    .atag-instruments  { color: #00c8ff; border-color: rgba(0,200,255,0.3); background: rgba(0,200,255,0.07); }
    .atag-heat         { color: #ff6b6b; border-color: rgba(255,107,107,0.3); background: rgba(255,107,107,0.07); }

    .article-wrap h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 20px; }
    .article-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-bottom: 48px; display: flex; gap: 24px; border-bottom: 1px solid var(--border); padding-bottom: 24px; }

    /* ARTICLE BODY */
    .article-body { font-size: 1rem; line-height: 1.85; }
    .article-body p { color: var(--text-muted); margin-bottom: 22px; }
    .article-body p:first-child { font-size: 1.08rem; color: var(--text); }
    .article-body h2 { font-size: 1.35rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin: 48px 0 16px; padding-top: 0; }
    .article-body h3 { font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 28px 0 10px; }
    .article-body ul, .article-body ol { padding-left: 1.5em; margin-bottom: 22px; }
    .article-body li { color: var(--text-muted); margin-bottom: 8px; line-height: 1.7; }
    .article-body li strong { color: var(--text); }
    .article-body strong { color: var(--text); font-weight: 600; }

    .article-body .callout { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 32px 0; }
    .article-body .callout p { color: var(--text-muted); margin: 0; font-size: 0.93rem; }

    /* DATA TABLE */
    .data-table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 0.88rem; }
    .data-table th { background: var(--bg-panel); color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
    .data-table td { padding: 12px 14px; border-bottom: 1px solid rgba(0,200,255,0.06); color: var(--text-muted); vertical-align: top; }
    .data-table td:first-child { color: var(--text); font-weight: 500; }

    /* BACK TO BLOG */
    .back-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); text-decoration: none; margin-top: 60px; letter-spacing: 0.06em; }
    .back-link:hover { opacity: 0.7; }

    /* RELATED */
    .related { max-width: 760px; margin: 0 auto 80px; padding: 0 40px; position: relative; z-index: 1; }
    .related h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 20px; }
    .related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .related-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; text-decoration: none; color: inherit; transition: border-color 0.2s; }
    .related-card:hover { border-color: rgba(0,200,255,0.3); }
    .related-card .rc-tag { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
    .related-card h4 { font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--text); }

    footer { border-top: 1px solid var(--border); padding: 40px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
    .footer-logo { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; }
    .footer-links { display: flex; gap: 28px; list-style: none; }
    .footer-links a { color: var(--text-muted); text-decoration: none; font-size: 12px; transition: color 0.2s; }
    .footer-links a:hover { color: var(--accent); }
    .footer-copy { font-size: 11px; color: var(--text-muted); opacity: 0.6; font-family: var(--font-mono); }

    @media (max-width: 768px) {
      body > nav { padding: 0 20px; }
      .article-wrap, .related { padding-left: 20px; padding-right: 20px; }
      .related-grid { grid-template-columns: 1fr; }
      footer { flex-direction: column; gap: 20px; text-align: center; }
      .nav-links { display: none; }
    }
  
/* ── Blog index layout ─────────────────────────────────────── */
.blog-header{padding:6rem 2rem 3rem;text-align:center;background:var(--bg-base)}
.blog-header h1{font-family:var(--font-head);font-size:clamp(2rem,5vw,3.5rem);color:var(--text);margin-bottom:1rem}
.blog-intro{color:var(--text-muted);max-width:60ch;margin:0 auto 2rem;line-height:1.7}
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.5rem}
.filter-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);padding:.4rem 1rem;border-radius:999px;cursor:pointer;font-size:.85rem;transition:all .2s}
.filter-btn:hover,.filter-btn.active{background:var(--accent);color:#000;border-color:var(--accent)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;padding:3rem 2rem;max-width:1200px;margin:0 auto}
.blog-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.75rem;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.75rem;transition:border-color .2s,transform .2s}
.blog-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.blog-card h2{font-family:var(--font-head);font-size:1.15rem;color:var(--text);line-height:1.4}
.blog-card p{color:var(--text-muted);font-size:.9rem;line-height:1.6;flex:1}
.card-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.read-time{font-size:.8rem;color:var(--text-muted)}
.read-link{color:var(--accent);font-size:.875rem;margin-top:auto}
/* ── Tags ───────────────────────────────────────────────────── */
.tag{font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:rgba(0,200,255,0.1);color:var(--accent);border:1px solid rgba(0,200,255,0.2)}
.tag--nl{background:rgba(255,165,0,0.1);color:orange;border-color:rgba(255,165,0,0.3)}
.tag--agriculture{background:rgba(0,200,100,0.1);color:#00c864;border-color:rgba(0,200,100,0.3)}
.tag--construction{background:rgba(255,180,0,0.1);color:#ffb400;border-color:rgba(255,180,0,0.3)}
.tag--heat-stress{background:rgba(255,80,0,0.1);color:#ff5000;border-color:rgba(255,80,0,0.3)}
.tag--municipalities{background:rgba(120,80,255,0.1);color:#7850ff;border-color:rgba(120,80,255,0.3)}
.tag--data{background:rgba(0,200,255,0.1);color:var(--accent);border-color:var(--border)}
.tag--instruments{background:rgba(200,200,200,0.1);color:#ccc;border-color:rgba(200,200,200,0.2)}
/* ── Article layout ─────────────────────────────────────────── */
.blog-article{max-width:820px;margin:6rem auto 4rem;padding:0 2rem}
.article-header{margin-bottom:3rem}
.article-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem}
.article-lead{font-size:1.15rem;color:var(--text-muted);line-height:1.7;margin-top:1rem}
.blog-article h2{font-family:var(--font-head);font-size:1.4rem;color:var(--text);margin:2.5rem 0 1rem}
.blog-article p{color:var(--text-muted);line-height:1.8;margin-bottom:1rem}
.blog-article ul,.blog-article ol{color:var(--text-muted);line-height:1.8;margin:1rem 0 1rem 1.5rem}
.blog-article li{margin-bottom:.5rem}
.blog-article table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9rem}
.blog-article th{background:var(--bg-panel);color:var(--text);padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.blog-article td{color:var(--text-muted);padding:.65rem 1rem;border-bottom:1px solid var(--border)}
.blog-article code{background:var(--bg-panel);color:var(--accent);padding:.2em .4em;border-radius:4px;font-family:var(--font-mono);font-size:.9em}
.blog-article section{margin-bottom:2.5rem}