@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --blue-deep:#123A5E;
  --blue:#1B6FB0;
  --blue-pale:#EAF2F8;
  --green:#2E8B57;
  --green-deep:#226941;
  --green-pale:#EAF6EF;
  --white:#FFFFFF;
  --gray-50:#F6F7F8;
  --gray-100:#EEF0F2;
  --gray-200:#DDE2E6;
  --gray-400:#9AA6AF;
  --ink:#1E2A33;
  --ink-soft:#57646D;
  --radius:10px;
  --radius-lg:16px;
  --maxw:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Inter', sans-serif;
  font-weight:700;
  color:var(--blue-deep);
  line-height:1.22;
  letter-spacing:-0.01em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
section{padding:76px 0;}
@media (max-width:768px){section{padding:52px 0;} .wrap{padding:0 20px;}}

.label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--green-deep);
  font-weight:500;
}

/* ===== HEADER / NAV ===== */
.topbar{background:var(--blue-deep); color:#CFE0EE; font-size:12.5px;}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:7px 28px; flex-wrap:wrap; gap:6px;}
.topbar a{color:#CFE0EE;}
.topbar .items{display:flex; gap:18px; flex-wrap:wrap;}

header.site-header{
  position:sticky; top:0; z-index:100;
  background:#fff;
  border-bottom:1px solid var(--gray-200);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; gap:11px;}
.brand img{height:42px; width:auto;}
.brand-name{font-weight:700; font-size:17px; color:var(--blue-deep); line-height:1.15;}
.brand-name span{display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.1em; color:var(--green-deep); font-weight:500; margin-top:2px; text-transform:uppercase;}
nav.links{display:flex; gap:4px; align-items:center; flex-wrap:wrap;}
nav.links a{font-size:13.5px; font-weight:600; color:var(--ink-soft); padding:9px 11px; border-radius:6px; transition:all .15s;}
nav.links a:hover, nav.links a.current{color:var(--blue); background:var(--blue-pale);}
.nav-cta{
  background:var(--green); color:#fff; padding:10px 20px; border-radius:6px;
  font-weight:700; font-size:13.5px; white-space:nowrap; transition:background .15s;
}
.nav-cta:hover{background:var(--green-deep);}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px;}
.nav-toggle span{width:22px; height:2px; background:var(--blue-deep); display:block;}
.mobile-links{display:none; flex-direction:column; padding:8px 20px 18px; border-top:1px solid var(--gray-200);}
.mobile-links a{padding:11px 0; font-size:15px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--gray-100);}
header.site-header.open .mobile-links{display:flex;}
@media (max-width:1080px){
  nav.links{display:none;}
  .nav-toggle{display:flex;}
}

/* ===== PAGE HERO ===== */
.page-hero{background:var(--blue-deep); color:#fff; padding:56px 0 60px;}
.breadcrumb{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#8FB3D1; margin-bottom:16px;}
.breadcrumb a{color:#BBD6EA;}
.breadcrumb a:hover{color:#fff;}
.page-hero .label{color:#7FD9A8;}
.page-hero h1{color:#fff; font-size:clamp(28px,3.8vw,42px); margin-top:10px; max-width:780px;}
.page-hero p.lede{color:#CFE0EE; max-width:600px; font-size:16px; margin-top:14px;}
.page-hero-ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px;}

/* ===== HOME HERO ===== */
.home-hero{background:var(--blue-deep); color:#fff; padding:64px 0 0;}
.home-hero-inner{display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; padding-bottom:56px;}
@media (max-width:900px){.home-hero-inner{grid-template-columns:1fr;}}
.home-hero h1{color:#fff; font-size:clamp(30px,4.4vw,50px); margin-top:14px; max-width:680px;}
.home-hero p.lede{color:#CFE0EE; max-width:540px; font-size:17px; margin-top:16px;}
.home-hero-ctas{display:flex; gap:11px; flex-wrap:wrap; margin-top:26px;}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:6px; font-weight:700; font-size:14px;
  transition:background .15s, border-color .15s; cursor:pointer; border:1.5px solid transparent;
}
.btn-primary{background:var(--green); color:#fff;}
.btn-primary:hover{background:var(--green-deep);}
.btn-blue{background:var(--blue); color:#fff;}
.btn-blue:hover{background:#155a8f;}
.btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,0.45);}
.btn-outline:hover{background:rgba(255,255,255,0.1); border-color:#fff;}
.btn-outline-dark{background:transparent; color:var(--blue-deep); border-color:var(--gray-200);}
.btn-outline-dark:hover{border-color:var(--blue); background:var(--blue-pale);}
.btn-sm{padding:9px 15px; font-size:12.5px;}

/* ===== SECTION HEAD ===== */
.section-head{max-width:680px; margin-bottom:40px;}
.section-head h2{font-size:clamp(24px,3vw,34px); margin-top:8px;}
.section-head p{color:var(--ink-soft); font-size:15.5px; margin-top:12px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.bg-alt{background:var(--gray-50);}
.bg-blue-pale{background:var(--blue-pale);}

/* ===== PHOTO PLACEHOLDER ===== */
.photo-placeholder{
  background:var(--gray-100);
  border:1.5px dashed var(--gray-200);
  border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--gray-400); text-align:center; padding:20px; gap:8px;
}
.photo-placeholder svg{width:30px; height:30px; stroke:var(--gray-400);}
.photo-placeholder span{font-size:11.5px; font-weight:600; color:var(--ink-soft); max-width:220px;}

/* ===== COMING SOON NOTE ===== */
.coming-soon{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--blue-pale); border:1px solid #CFE0EE; border-radius:var(--radius);
  padding:16px 18px; font-size:13.5px; color:var(--ink-soft);
}
.coming-soon svg{width:18px; height:18px; stroke:var(--blue); flex-shrink:0; margin-top:1px;}
.coming-soon strong{color:var(--blue-deep);}

/* ===== CARDS ===== */
.card{background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg);}
.prog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){.prog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.prog-grid{grid-template-columns:1fr;}}
.prog-card{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--gray-200); background:#fff; transition:box-shadow .2s, transform .2s;}
.prog-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(18,58,94,0.1);}
.prog-icon{height:96px; display:flex; align-items:center; justify-content:center; background:var(--blue-deep);}
.prog-icon svg{width:34px; height:34px; stroke:#fff;}
.prog-body{padding:22px;}
.prog-body h4{font-size:16.5px; margin:8px 0 8px;}
.prog-body p{font-size:13.5px; color:var(--ink-soft);}
.prog-body .learn{display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:12.5px; font-weight:700; color:var(--blue);}

/* ===== SDG / TAG CHIPS ===== */
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{background:var(--gray-100); border-radius:999px; padding:6px 13px; font-size:12px; font-weight:600; color:var(--blue-deep);}

/* ===== TIMELINE / STEP LIST ===== */
.step-list{border-left:2px solid var(--gray-200); padding-left:24px;}
.step-item{position:relative; padding-bottom:24px;}
.step-item:last-child{padding-bottom:0;}
.step-item::before{content:''; position:absolute; left:-31px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--green); border:3px solid #fff; box-shadow:0 0 0 2px var(--green);}
.step-title{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--green-deep); font-weight:500; text-transform:uppercase;}
.step-text{font-size:14px; color:var(--ink-soft); margin-top:3px;}

/* ===== STAT PLACEHOLDER ===== */
.stat-strip{background:var(--blue-deep); padding:34px 0;}
.stat-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center;}
@media (max-width:768px){.stat-strip .wrap{grid-template-columns:repeat(2,1fr);}}
.stat-box .num{font-size:26px; font-weight:800; color:rgba(255,255,255,0.5);}
.stat-box .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#9FBEDA; margin-top:5px;}

/* ===== MAP ===== */
.map-section{background:var(--blue-deep); color:#fff;}
.map-section .label{color:#7FD9A8;}
.map-section h2{color:#fff;}
.map-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
@media (max-width:900px){.map-grid{grid-template-columns:1fr;}}
#somalia-map{width:100%; height:auto;}
#somalia-map path{fill:rgba(255,255,255,0.1); stroke:rgba(255,255,255,0.4); stroke-width:1; cursor:pointer; transition:fill .2s;}
#somalia-map path:hover{fill:var(--green);}
.map-tip{position:absolute; background:#fff; color:var(--blue-deep); padding:7px 11px; border-radius:6px; font-size:12.5px; font-weight:700; pointer-events:none; opacity:0; transition:opacity .12s; box-shadow:0 8px 20px rgba(0,0,0,0.25); z-index:5; white-space:nowrap;}
.map-wrap{position:relative;}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid var(--gray-200); padding:18px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:700; font-size:15px; color:var(--blue-deep);}
.faq-q .plus{font-size:19px; color:var(--green-deep); transition:transform .2s; font-weight:400;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:13.5px; color:var(--ink-soft);}
.faq-item.open .faq-a{max-height:220px; margin-top:10px;}

/* ===== ORGANOGRAM ===== */
.org-chart{display:flex; flex-direction:column; align-items:center; gap:10px;}
.org-node{background:#fff; border:1.5px solid var(--gray-200); border-radius:8px; padding:10px 18px; font-size:13px; font-weight:700; color:var(--blue-deep); text-align:center;}
.org-node.top{background:var(--blue-deep); color:#fff; border-color:var(--blue-deep);}
.org-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.org-line{width:2px; height:16px; background:var(--gray-200);}

/* ===== DONATE ===== */
.donate-panel{background:#fff; border-radius:var(--radius-lg); border:1px solid var(--gray-200); padding:36px; display:grid; grid-template-columns:1fr 1fr; gap:40px;}
@media (max-width:860px){.donate-panel{grid-template-columns:1fr; padding:24px;}}
.freq-toggle{display:flex; background:var(--gray-100); border-radius:8px; padding:4px; margin-bottom:20px; width:fit-content;}
.freq-toggle button{border:none; background:none; padding:9px 18px; border-radius:6px; font-weight:700; font-size:13px; color:var(--ink-soft); cursor:pointer;}
.freq-toggle button.active{background:var(--blue-deep); color:#fff;}
.amount-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px;}
.amount-btn{padding:14px 8px; border-radius:8px; border:1.5px solid var(--gray-200); background:#fff; text-align:center; font-weight:700; font-size:14px; color:var(--blue-deep); cursor:pointer; transition:all .15s;}
.amount-btn.active, .amount-btn:hover{border-color:var(--green); background:var(--green-pale);}
.custom-amount{display:flex; align-items:center; border:1.5px solid var(--gray-200); border-radius:8px; padding:12px 15px; margin-bottom:18px;}
.custom-amount span{color:var(--ink-soft); font-weight:700; margin-right:6px;}
.custom-amount input{border:none; outline:none; font-size:14px; font-family:'Inter'; width:100%;}
.pay-icons{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0;}
.pay-chip{border:1px solid var(--gray-200); border-radius:6px; padding:6px 11px; font-size:11px; font-weight:700; color:var(--ink-soft); background:var(--gray-50);}
.give-way{display:flex; gap:13px; padding:14px 0; border-bottom:1px solid var(--gray-200);}
.give-way:last-child{border-bottom:none;}
.give-way .gi{width:36px; height:36px; border-radius:8px; background:var(--gray-100); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.give-way .gi svg{width:18px; height:18px; stroke:var(--green-deep);}
.give-way h5{font-size:13.5px; margin-bottom:2px; color:var(--blue-deep);}
.give-way p{font-size:12px; color:var(--ink-soft);}

/* ===== FORMS ===== */
form .f-field{margin-bottom:15px;}
form .f-field label{display:block; font-size:12px; color:var(--ink-soft); margin-bottom:5px; font-weight:600;}
form .f-field input, form .f-field textarea, form .f-field select{
  width:100%; padding:11px 13px; border-radius:7px; border:1.5px solid var(--gray-200);
  background:#fff; color:var(--ink); font-family:'Inter'; font-size:13.5px; outline:none;
}
form .f-field textarea{resize:vertical; min-height:100px;}
form .f-row{display:grid; grid-template-columns:1fr 1fr; gap:13px;}
@media (max-width:600px){form .f-row{grid-template-columns:1fr;}}

.contact-dark{background:var(--blue-deep); color:#fff;}
.contact-dark .label{color:#7FD9A8;}
.contact-dark h2{color:#fff;}
.contact-dark .f-field label{color:#BBD6EA;}
.contact-dark .f-field input, .contact-dark .f-field textarea, .contact-dark .f-field select{background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.2); color:#fff;}
.office{display:flex; gap:14px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,0.14);}
.office .gi{width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.office .gi svg{width:16px; height:16px; stroke:#7FD9A8;}
.office h5{font-size:13.5px; margin-bottom:2px;}
.office p{font-size:12.5px; color:#BBD6EA;}

/* ===== RESOURCES / DOC LIST ===== */
.doc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media (max-width:700px){.doc-grid{grid-template-columns:1fr;}}
.doc-item{display:flex; align-items:center; gap:14px; padding:17px; border:1px dashed var(--gray-200); border-radius:10px; background:var(--gray-50);}
.doc-icon{width:38px; height:38px; border-radius:8px; background:#fff; border:1px solid var(--gray-200); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.doc-icon svg{width:18px; height:18px; stroke:var(--blue);}
.doc-item h5{font-size:13.5px; color:var(--blue-deep);}
.doc-item p{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); margin-top:2px;}

/* ===== NEWS / EMPTY STATE ===== */
.empty-state{
  border:1.5px dashed var(--gray-200); border-radius:var(--radius-lg);
  padding:52px 24px; text-align:center; background:var(--gray-50);
}
.empty-state svg{width:38px; height:38px; stroke:var(--gray-400); margin:0 auto 14px;}
.empty-state h4{font-size:16px; margin-bottom:6px;}
.empty-state p{font-size:13.5px; color:var(--ink-soft); max-width:380px; margin:0 auto;}

/* ===== NEWSLETTER ===== */
.newsletter{background:var(--green-deep); color:#fff; padding:50px 0;}
.nl-inner{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.nl-inner h3{color:#fff; font-size:21px;}
.nl-inner p{color:#D9F0E3; margin-top:5px; font-size:13.5px;}
.nl-form{display:flex; gap:9px;}
.nl-form input{padding:11px 16px; border-radius:6px; border:none; width:240px; font-family:'Inter'; font-size:13px;}
.nl-form button{padding:11px 20px; border-radius:6px; border:none; background:var(--blue-deep); color:#fff; font-weight:700; cursor:pointer; font-size:13px;}

/* ===== FOOTER ===== */
footer.site-footer{background:#0E2A44; color:#AFC4D6; padding:56px 0 24px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:30px; margin-bottom:40px;}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-brand{display:flex; align-items:center; gap:9px; margin-bottom:12px;}
.foot-brand img{height:34px;}
.foot-brand span{font-weight:700; font-size:15px; color:#fff;}
footer.site-footer p.tag{font-size:12.5px; max-width:240px;}
.foot-col h5{color:#fff; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:13px; font-family:'IBM Plex Mono',monospace; font-weight:500;}
.foot-col a{display:block; font-size:13px; margin-bottom:9px; color:#9FB6CA;}
.foot-col a:hover{color:#fff;}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.1); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:#7D93A8;}
.foot-bottom a{color:#7D93A8;}
.foot-bottom a:hover{color:#fff;}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease;}
.reveal.in{opacity:1; transform:translateY(0);}


.nav-drop{position:relative;}
.nav-drop-panel{
  display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--gray-200);
  border-radius:10px; padding:8px; min-width:230px; box-shadow:0 18px 34px rgba(18,58,94,0.14); z-index:50;
}
.nav-drop-panel a{display:block; padding:9px 12px; font-size:13px; font-weight:600; border-radius:6px; color:var(--ink-soft);}
.nav-drop-panel a:hover{background:var(--blue-pale); color:var(--blue);}
.nav-drop:hover .nav-drop-panel{display:block;}

/* ===========================================================
   ENHANCEMENTS — added for the redesign
   =========================================================== */

/* Accessible focus states */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2.5px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Selection color */
::selection{ background: var(--green); color:#fff; }

/* Real illustration images that replace the old dashed placeholders */
.photo-img{
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  box-shadow: 0 18px 40px rgba(18,58,94,0.08);
}
.photo-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-img.ratio-16-9{ aspect-ratio: 16/9; }
.photo-img.ratio-4-3{ aspect-ratio: 4/3; }
.photo-img.ratio-1-1{ aspect-ratio: 1/1; }
.photo-img.no-border{ border:none; box-shadow:none; }

/* News / gallery thumbnails using the illustration set */
.thumb-img{
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1/1;
  background: var(--gray-100);
}
.thumb-img img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.thumb-img:hover img{ transform: scale(1.06); }

/* Decorative dotted pattern behind page heroes, layered over the deep-blue bg */
.page-hero, .home-hero{
  position: relative;
  overflow: hidden;
}
.page-hero::before, .home-hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:url('../images/illustrations/hero-pattern.svg');
  background-repeat:no-repeat;
  background-position: right -40px top -20px;
  background-size: 620px auto;
  opacity:.55;
  pointer-events:none;
}
.page-hero .wrap, .home-hero .wrap{ position:relative; z-index:1; }

/* Card and image hover polish */
.card{ transition: box-shadow .2s ease, transform .2s ease; }
.card.reveal:hover{ box-shadow: 0 16px 34px rgba(18,58,94,0.08); }

/* Logo sizing guard */
.brand img, .foot-brand img{ object-fit: contain; }

/* Smoother nav dropdown entrance */
.nav-drop-panel{
  opacity:0; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease;
  visibility:hidden;
}
.nav-drop:hover .nav-drop-panel{
  display:block; opacity:1; transform:translateY(0); visibility:visible;
}

/* Back-to-top button */
.back-to-top{
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue-deep); color: #fff; border: none;
  display: flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(18,58,94,0.3);
  cursor: pointer; opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .15s ease;
}
.back-to-top.show{ opacity: 1; pointer-events:auto; transform: translateY(0); }
.back-to-top:hover{ background: var(--blue); }
.back-to-top svg{ width:18px; height:18px; stroke:#fff; }

/* Skip link for accessibility */
.skip-link{
  position:absolute; left:12px; top:-60px; background:#fff; color:var(--blue-deep);
  padding:10px 16px; border-radius:6px; font-weight:700; font-size:13px; z-index:1000;
  transition: top .15s ease; box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.skip-link:focus{ top:12px; }

/* Print polish */
@media print{
  .topbar, header.site-header, .back-to-top, .newsletter, footer.site-footer{ display:none; }
  section{ padding: 20px 0; }
}

/* ===========================================================
   BLOG / ARTICLE STYLES — added for WordPress conversion
   =========================================================== */

/* Blog card grid (home.php / archive.php) */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width: 900px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .blog-grid{ grid-template-columns:1fr; } }

.blog-card{ display:block; overflow:hidden; text-decoration:none; }
.blog-card .thumb-img{ aspect-ratio:16/10; border-radius:var(--radius) var(--radius) 0 0; }
.blog-card .blog-card-body{ padding:20px; }
.blog-card .blog-card-body .label{ margin-bottom:6px; }
.blog-card h4{ font-size:16px; line-height:1.35; margin-bottom:8px; color:var(--ink); }
.blog-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.blog-card:hover h4{ color:var(--blue); }

/* Pagination */
.hariva-pagination{ display:flex; justify-content:center; gap:8px; margin-top:36px; flex-wrap:wrap; }
.hariva-pagination a, .hariva-pagination span{
  min-width:38px; height:38px; padding:0 12px; border-radius:8px; border:1px solid var(--gray-200);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:var(--ink-soft);
}
.hariva-pagination a:hover{ background:var(--blue-pale); color:var(--blue); border-color:transparent; }
.hariva-pagination .current{ background:var(--blue-deep); color:#fff; border-color:var(--blue-deep); }

/* Single post article */
.entry-header{ margin-bottom:26px; }
.entry-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; margin-top:10px; }
.entry-meta a{ color:var(--blue); }
.entry-thumb{ border-radius:var(--radius-lg); overflow:hidden; margin-bottom:32px; box-shadow:0 18px 40px rgba(18,58,94,0.08); }
.entry-thumb img{ width:100%; display:block; aspect-ratio:16/8; object-fit:cover; }

.entry-content{ max-width:760px; font-size:16px; line-height:1.8; color:var(--ink); }
.entry-content p{ margin-bottom:20px; }
.entry-content h2{ font-size:26px; margin:36px 0 14px; color:var(--blue-deep); }
.entry-content h3{ font-size:20px; margin:28px 0 12px; color:var(--blue-deep); }
.entry-content ul, .entry-content ol{ margin:0 0 20px 22px; }
.entry-content li{ margin-bottom:8px; line-height:1.7; }
.entry-content ul{ list-style:disc; }
.entry-content ol{ list-style:decimal; }
.entry-content a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.entry-content blockquote{
  border-left:3px solid var(--green); padding:6px 0 6px 20px; margin:24px 0; font-style:italic; color:var(--ink-soft);
}
.entry-content img{ max-width:100%; height:auto; border-radius:var(--radius); margin:16px 0; }
.entry-content figcaption{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; }
.entry-content hr{ border:none; border-top:1px solid var(--gray-200); margin:32px 0; }

.entry-footer{ max-width:760px; margin-top:36px; padding-top:24px; border-top:1px solid var(--gray-200); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.entry-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.entry-tags a{ font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px; background:var(--blue-pale); color:var(--blue); }

.post-layout{ display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start; }
@media (max-width: 900px){ .post-layout{ grid-template-columns:1fr; } }
.post-sidebar .recent-post{ display:flex; gap:12px; margin-bottom:16px; text-decoration:none; }
.post-sidebar .recent-post .thumb-img{ width:64px; height:64px; flex-shrink:0; border-radius:8px; }
.post-sidebar .recent-post h6{ font-size:13px; line-height:1.4; color:var(--ink); }
.post-sidebar .recent-post:hover h6{ color:var(--blue); }

/* 404 page */
.error-404-wrap{ text-align:center; padding:100px 24px; }
.error-404-wrap .code{ font-family:'IBM Plex Mono',monospace; font-size:80px; font-weight:700; color:var(--blue-pale); line-height:1; }
.error-404-wrap h1{ margin-top:8px; }