:root{
      --bg:#EFF2F7; /* requested background */
      --text:#0f172a; --muted:#64748b; --soft:#e7eaf1; --border:#d7dbe3; --brand:#0ea5e9; --brand-2:#10b981; --link:#0ea5e9;
      --card-shadow:0 6px 18px rgba(2,6,23,.06);
    }
    *{box-sizing:border-box}
	
	html, body {
	  height: 100%;
	  margin: 0;
	  display: flex;
	  flex-direction: column;
	}
	
	main.wrap {
	  flex: 1;  /* pushes footer down if content is short */
	}

    body{margin:0; font-family: "Open Sans", sans-serif; font-weight: 400; color:var(--text); background:var(--bg)}
    a{color:var(--text); text-decoration:none}
    .footer {
  border-top: 1px solid var(--border);
  background: #f9fafb;
  padding: 16px 0;
}
    .footer a:hover{color:#ffffff; text-decoration:underline}
    img{max-width:100%; display:block}

    /* Top utility bar */
    .toputil{background:#0b1220; color:#cbd5e1; font-size:14px; height:40px;}
    .toputil .inner{max-width:1200px; margin:0 auto; padding:0px 16px; display:flex; gap:16px; align-items:center; justify-content:space-between; line-height:40px;}
    .toputil .right{display:flex; gap:14px; align-items:center}

    /* Header */
    .header{border-bottom:1px solid var(--border); background:#fff}
    .header .inner{max-width:1200px; margin:0 auto; padding:22px 16px; display:flex; align-items:center; justify-content:space-between}
    .brand {
  display: flex;
  align-items: center;
  gap: 12px; /* space between logo and title */
}

.brand .logo {
  height: 48px;
  flex-shrink: 0;
}

.brand .logo img {
  width: 100%;
  height: 48px;
  display: block;
}

.brand .title {
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.05em;
  display: flex;
  color:#609594;
  align-items: center;
  gap: 8px; /* spacing if you keep an inline image with text */
}

    .searchbar{position:relative; width:420px; max-width:45vw}
    .searchbar input{width:100%; padding:10px 12px 10px 36px; border:1px solid var(--border); background:#fff; outline:none}
    .searchbar svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.6}

/* Nav */
    .nav{border-top:0px solid var(--border); border-bottom:0px solid var(--border); background:#fff}
    .nav .inner{max-width:1200px; margin:0 auto; padding:0px 0px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
    .nav a {
  display: inline-block;       /* or flex if you want vertical centering */
  padding: 6px 10px;           /* keep your spacing */
  height: 100%;                /* fill the nav bar height */
  line-height: 1.4;            /* keeps text centered if not flex */
  position: relative;          /* important so sub-menu anchors to this */
}
    .nav a.active,.nav a:hover{opacity:1; background:var(--soft)}
	
	/* Dropdown container */
.nav .has-sub {
  position: relative;
}

.nav .has-sub {
  position: relative;
  display: inline-block;       /* ensure it's treated as a block for positioning */
}

/* The dropdown itself */
.nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;   /* start directly below the parent element (the whole nav item) */
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  z-index: 999;
}

.nav .sub-menu a {
  display: block;
  padding: 8px 12px;
  font-weight: normal;
  opacity: 0.9;
  white-space: nowrap;
}

.nav .sub-menu a:hover {
  background: var(--soft);
  opacity: 1;
}

/* Show on hover */
.nav .has-sub:hover .sub-menu {
  display: block;
}

/* Make dropdowns align correctly inside flexbox nav */
.nav .inner {
  position: relative;
}


    /* Layout */
    .wrap{max-width:1200px; margin:24px auto 60px; padding:0 16px; display:grid; grid-template-columns: 2fr 1fr; gap:28px}

    /* Hero grid */
    .hero{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:stretch}
    .cat{display:inline-block; background:#0ea5e9; color:#001018; font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:11px; padding:6px 10px}
    .hero-card h2{margin:10px 0 6px; font-size:22px; font-weight:700; letter-spacing:-0.01em}
    .meta{font-size:13px; color:var(--muted)}
	
.hero-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:0 2px 6px rgba(2,6,23,.04);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.hero-card .photo{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  border-bottom:1px solid var(--border);
}

.hero-card .body{
  padding:14px 16px;
}




    /* Post list */
    .post{display:grid; grid-template-columns: 200px 1fr; gap:16px; padding:16px; border:1px solid var(--border); margin-bottom:16px; background:#fff; box-shadow:0 2px 6px rgba(2,6,23,.04); transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;}
    .thumb{overflow:hidden; background:#cbd5e1; aspect-ratio:4/3; position:relative}
    .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
    .post h3{margin:4px 0 8px; font-size:20px; font-weight:700; letter-spacing:-0.01em}
    .post .excerpt{color:var(--muted); font-size:14px}
    .post .postmeta{margin-top:8px; font-size:13px; color:#64748b}
    .read{display:inline-block; margin-top:10px; font-weight:600; color:#0ea5e9}

    /* Sidebar */
    .side .widget{border:1px solid var(--border); padding:16px; background:#fff; margin-bottom:16px; box-shadow:var(--card-shadow)}
    .widget h4{margin:0 0 10px; text-transform:uppercase; font-size:12px; letter-spacing:.6px; color:#475569; font-weight: 400;}
    .widget .tag{display:inline-block; margin:6px 6px 0 0; padding:6px 10px; background:var(--soft); font-size:12px; font-weight: 400; color:#334155}

    /* Single article (not used on index) */
    .single{grid-column: 1 / -1; display:none}
    .single.active{display:block}
    .breadcrumb{font-size:13px; color:#64748b; margin-bottom:10px}
    .single h1{font-size:32px; margin:6px 0 10px; font-weight:700}
    .single .single-meta{color:#64748b; font-size:13px; border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:16px}
    .toc{border:1px solid var(--border); background:#fff; padding:12px; margin:18px 0; box-shadow:var(--card-shadow)}
    .toc strong{display:block; margin-bottom:8px; text-transform:uppercase; font-size:11px; letter-spacing:.5px; color:#475569}
    .toc a{display:block; padding:6px 0; color:#0f172a; opacity:.85}
    .toc a:hover{opacity:1}

    /* Remove rounded corners */
    .brand .logo,
    .searchbar input,
    .nav a,
    .hero-card,
    .post,
    .thumb,
    .side .widget,
    .toc,
    .cat { border-radius:0 !important; }

    /* Footer */
    .footer{border-top:1px solid var(--border); margin-top:32px; padding:24px 16px; color:#cbd5e1; background:#0b1220}
    .footer .inner{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between}

    @media (max-width: 1000px){
      .wrap{grid-template-columns: 1fr}
      .hero{grid-template-columns: 1fr}
      .post{grid-template-columns: 1fr}
      .searchbar{max-width:100%; width:100%}
    }

    .maincol{display:grid; gap:16px; align-content:start}
    .posts{display:block}
    .hero-card:hover, .post:hover{ box-shadow:0 10px 24px rgba(2,6,23,.10); border-color:#c7cdd6; transform:translateY(-1px); }
    .hero-card:focus-within, .post:focus-within{ box-shadow:0 10px 24px rgba(2,6,23,.10); border-color:#c7cdd6; transform:translateY(-1px); }

    /* Meta line + tags */
    .info-line{display:flex; align-items:center; gap:12px; flex-wrap:nowrap; color:gray; font-size:12px;}
    .info-line .avatar{width:32px; height:32px; border-radius:50% !important; object-fit:cover; border:1px solid var(--border)}
    .info-line .ic{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; color:gray;}
    .info-line svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8}
    .tags{display:flex; flex-wrap:wrap; gap:6px}
    .tag{display:inline-block; padding:4px 8px; background:var(--soft); font-size:12px; color:#334155}
    /* About card */
    .about-card{display:flex; flex-direction:column; align-items:center; text-align:center}
    .avatar-lg{width:96px; height:96px; border-radius:50% !important; object-fit:cover; border:1px solid var(--border)}
    .about-name{margin-top:10px; font-weight:700}
    .about-socials{margin-top:10px; display:flex; gap:10px}
    .about-socials .social{width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:#fff; border-radius:50% !important}
    .about-socials .social svg{width:18px; height:18px; fill:currentColor}


	.breadcrumbs{font-size:13px; color:var(--muted); margin-bottom:12px}
    .breadcrumbs a{color:var(--muted)}
    .breadcrumbs a:hover{text-decoration:underline}
    .article-title{font-size:32px; font-weight:700; letter-spacing:-0.01em; margin:4px 0 10px}
    .article-meta{margin-bottom:16px}
    .article-content{background:#fff; border:1px solid var(--border); box-shadow:0 2px 6px rgba(2,6,23,.04); padding:18px}
    .article-content h2{margin:18px 0 8px; font-size:20px}
    .article-content p{margin:10px 0}
    .article-content pre{background:#0f172a; color:#e2e8f0; padding:14px; border:1px solid var(--border); overflow:auto}
    .article-content code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:13px}
    .note{border-left:3px solid var(--brand); background:var(--soft); padding:10px 12px; margin:12px 0}


    /* Comments */
    .comments{margin-top:18px}
    .comments h3{margin:0 0 10px; font-size:18px}
    .comment-list{display:flex; flex-direction:column; gap:12px}
    .comment{display:grid; grid-template-columns:40px 1fr; gap:12px; padding:14px; border:1px solid var(--border); background:#fff; box-shadow:0 2px 6px rgba(2,6,23,.04)}
    .comment .avatar-sm{width:40px; height:40px; border-radius:50% !important; object-fit:cover; border:1px solid var(--border)}
    .comment .head{display:flex; align-items:center; gap:8px; font-weight:600}
    .comment .meta{color:var(--muted); font-size:12px}
    .comment-form{margin-top:16px; border:1px solid var(--border); background:#fff; box-shadow:0 2px 6px rgba(2,6,23,.04); padding:16px}
    .comment-form h3{margin:0 0 10px; font-size:18px}
    .comment-form label{display:block; font-size:13px; color:var(--muted); margin:8px 0 4px}
    .comment-form input,.comment-form textarea{width:100%; border:1px solid var(--border); padding:10px 12px; background:#fff; outline:none}
    .comment-form textarea{min-height:120px; resize:vertical}
    .comment-form button{margin-top:12px; padding:10px 14px; border:1px solid var(--border); background:var(--soft); font-weight:600; cursor:pointer}
    .comment-form input,.comment-form textarea,.comment-form button{border-radius:0 !important}
	
	
	/* Tag filter (right sidebar) */
.tag-check{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; margin:6px 0;
  border:1px solid var(--border); background:#fff;
}
.tag-check input{ transform:translateY(1px); }
.tag-check .swatch{
  width:14px; height:14px; display:inline-block;
  border:1px solid rgba(0,0,0,.2);
}
.tag-note{ font-size:12px; color:var(--muted); margin-top:6px; }

.no-results{padding:14px;margin:10px 0;border:1px dashed var(--border);background:#fff;color:var(--muted);text-align:center}