:root {
      --bg: #ffffff;
      --text: #16181d;
      --muted: #6b7280;
      --card: #f8fafc;
      --brand: #ff4d67;
      --brand-600: #e33b54;
      --ring: rgba(255,77,103,.45);
      --border: #e5e7eb;
    }
    [data-theme="dark"] {
      --bg: #0b0e14;
      --text: #e5e7eb;
      --muted: #9aa4b2;
      --card: #0f141c;
      --brand: #ff546d;
      --brand-600: #ff6b82;
      --ring: rgba(255,104,130,.35);
      --border: #1f2937;
    }
    * {
         box-sizing: border-box;
    }
    html, body {
         height: 100%;
     }
    body {
      margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: var(--bg); color: var(--text);
      line-height: 1.6;
    }

a { 
color: inherit; 
text-decoration: none;
}    

.skip-link { 
position: absolute; 
left: -9999px; 
top: auto; 
width: 1px;
height: 1px; 
overflow: hidden; 
}
.skip-link:focus { 
left: 1rem; 
top: 1rem; 
width: auto; 
height: auto;
background: var(--brand); 
color: white; 
padding: .5rem .75rem;
border-radius: .5rem; 
z-index: 1000; }

header {
position: sticky; 
top: 0;
backdrop-filter: saturate(180%) blur(8px);
background: color-mix(in srgb, var(--bg) 85%, transparent);
border-bottom: 1px solid var(--border);
z-index: 10;
}
 #closeBtn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.container {
width: min(1100px, 92%);
margin-inline: auto; 
}

.nav { 
display: flex;
align-items: center;
gap: 1rem; 
padding: .8rem 0; }   

.brand { 
display: flex; 
align-items: center; 
gap: .6rem; 
font-weight: 800; 
letter-spacing: .3px; }
  
.logo { 
width: 34px;
height: 34px; 
display: grid; 
place-items: center; 
border-radius: 10px;
background: var(--brand); 
color: #fff; 
font-size: 18px; 
box-shadow: 0 8px 20px -12px var(--ring);
 }

.nav-links { 
display: flex; 
gap: .9rem; 
align-items: center; 
font-weight: 600; 
}

.nav-links a { 
color: var(--muted); 
padding: .4rem .6rem; 
border-radius: .4rem; 
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); background: var(--card); }
   
.nav-right {
margin-left: auto; 
display: flex; 
align-items: center; 
gap: .6rem; 
}

.search {
position: relative; 
}

 #search {
 width: 220px; 
 max-width: 48vw; 
 padding: .55rem 2.2rem .55rem .8rem; 
 background: var(--card); border: 1px solid var(--border);
 color: var(--text);
 border-radius: .6rem; 
 outline: none;
} 
.btn { 
display: inline-flex;
align-items: center; 
gap: .5rem; 
border: 1px solid var(--border); 
background: var(--bg); 
color: var(--text); 
padding: .5rem .75rem; 
border-radius: .6rem; 
cursor: pointer;
}
.btn:hover {
background: var(--card);
}

/* end section for header */

/* main section */

.container {
width: min(1100px, 92%);
margin-inline: auto; 
}

.hero { 
padding: 2.2rem 0 1.2rem; 
}

    .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(50%); clip: rect(0 0 0 0); overflow: hidden; }
    .search svg { position: absolute; right: .55rem; top: 50%; translate: 0 -50%; opacity: .7; }
   
   
  #h1 { 
    font-size: clamp(1.8rem, 2.8vw, 2.4rem); 
    line-height: 1.15; 
    margin: .5rem 0 .6rem;
 }
    
.hero p { 
    color: var(--muted); 
    margin: 0; 
}

    /* Featured */
    .featured { 
        display: grid; 
        grid-template-columns: 1.1fr .9fr;
        gap: 1rem; margin: 1rem 0 2rem; 
    }
    .card {
        background: var(--card); 
        border: 1px solid var(--border); 
        border-radius: 1rem; overflow: clip; 
        box-shadow: 0 10px 30px -22px var(--ring);
     }
    .card .media { 
        aspect-ratio: 16/9; 
        background: linear-gradient(135deg, #ffd6dc, #ffeaea);
    }
    .card .media img { 
        width: 100%; 
        height: 100%; 
        object-fit: cover;
        display: block; 
    }
    .card .content { 
        padding: 1rem;
     }
    .badge { 
        display: inline-block;
        font-size: .75rem; 
        font-weight: 700; 
        letter-spacing: .2px; 
        color: #fff; 
        background: var(--brand);
        padding: .25rem .5rem;
        border-radius: .4rem;
     }
    .card h3 { margin: .6rem 0 .4rem; font-size: 1.2rem; line-height: 1.3; }
    .meta { color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
    .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); display: inline-block; }
    .excerpt { color: var(--muted); margin-top: .5rem; }

    /* Grid */
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .post { transition: transform .28s ease, box-shadow .28s ease; }
    .post:focus-within, .post:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -28px var(--ring); }

    aside.sidebar { position: sticky; top: 68px; align-self: start; display: grid; gap: 1rem; }
    .widget { background: var(--card); border: 1px solid var(--border); border-radius: .8rem; padding: 1rem; }
    .widget h4 { margin: 0 0 .6rem; }
    .taglist { display: flex; flex-wrap: wrap; gap: .4rem; }
    .tag { font-size: .85rem; padding: .35rem .55rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); }
    .newsletter input { width: 100%; padding: .6rem .75rem; border-radius: .6rem; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
    .newsletter button { width: 100%; margin-top: .6rem; background: var(--brand); color: #fff; border: none; padding: .65rem .8rem; border-radius: .6rem; cursor: pointer; font-weight: 700; }
    .newsletter button:hover { background: var(--brand-600); }

    .layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.2rem; align-items: start; }

    footer {
      text-align: center;
      padding: 30px;
      font-size: 0.9rem;
      color: #777;
      margin-top: 40px;
    }
    /* Responsive */
    @media (max-width: 980px) {
      .featured { grid-template-columns: 1fr; }
      .layout { grid-template-columns: 1fr; }
      aside.sidebar { position: relative; top: 0; }
      .grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .nav { flex-wrap: wrap; gap: .6rem; }
      .nav-right { width: 100%; justify-content: space-between; }
      .grid { grid-template-columns: 1fr; }
      .search input { width: 100%; }
    }