/* === velvet-night — deep purple × rose pink === */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
    --vn-bg:       #0d0718;
    --vn-surf:     #170c29;
    --vn-surf2:    #1e1137;
    --vn-bdr:      #2d1a4a;
    --vn-txt:      #e8ddf5;
    --vn-muted:    #a99bbe;
    --vn-acc:      #d4548a;
    --vn-acc-h:    #e879a0;
    --vn-acc-soft: rgba(212,84,138,.15);
    --vn-rad:      12px;
    --vn-shadow:   0 4px 24px rgba(0,0,0,.5);
    --vn-font:     'Nunito', system-ui, sans-serif;
}

/* override global vars for shared components */
:root {
    --color-bg:           var(--vn-bg);
    --color-surface:      var(--vn-surf);
    --color-surface-hover:var(--vn-surf2);
    --color-border:       var(--vn-bdr);
    --color-text:         var(--vn-txt);
    --color-text-muted:   #a99bbe;
    --color-accent:       var(--vn-acc);
    --color-accent-hover: var(--vn-acc-h);
    --color-accent-soft:  var(--vn-acc-soft);
    --font:               var(--vn-font);
    --radius:             var(--vn-rad);
    --radius-lg:          var(--vn-rad);
    --shadow:             var(--vn-shadow);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--vn-font); background: var(--vn-bg); color: var(--vn-txt); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--vn-acc); text-decoration: none; transition: color .2s; }
a:hover { color: var(--vn-acc-h); }
img { max-width: 100%; height: auto; display: block; }

/* === Global text & headings === */
h1, h2, h3, h4, h5, h6 { color: var(--vn-txt); }
p { color: var(--vn-txt); }

/* === Layout === */
.zreb4 { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.ecow3 { min-height: 60vh; padding: 2rem 0; }

/* === Header === */
.iqiq0 { background: rgba(13,7,24,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--vn-bdr); position: sticky; top: 0; z-index: 100; }
.hsif5 { display: flex; align-items: center; gap: 1.25rem; height: 56px; }
.dtim9 { font-weight: 900; font-size: 1.3rem; letter-spacing: -.02em; color: var(--vn-acc); white-space: nowrap; }
.dtim9:hover { color: var(--vn-acc-h); }
.svim6 { display: flex; gap: 0; }
.svim6 a { padding: .5rem .9rem; font-weight: 600; color: var(--vn-muted); font-size: .85rem; border-left: 1px solid var(--vn-bdr); }
.svim6 a:last-child { border-right: 1px solid var(--vn-bdr); }
.svim6 a:hover { color: #fff; background: var(--vn-surf2); }
.kriz5 { display: inline-block; background: var(--vn-acc); border-radius: 999px; font-weight: 800; color: #fff; padding: .45rem 1.2rem; font-size: .82rem; white-space: nowrap; transition: background .2s; }
.kriz5:hover { background: var(--vn-acc-h); color: #fff; }
.twiw6 { position: relative; margin-left: auto; }
.szid7 { background: var(--vn-surf2); border: 1px solid var(--vn-bdr); color: var(--vn-txt); padding: .4rem .75rem; border-radius: var(--vn-rad); font-size: .85rem; font-family: var(--vn-font); outline: none; width: 180px; transition: border-color .2s; }
.szid7:focus { border-color: var(--vn-acc); }
.szid7::placeholder { color: var(--vn-muted); }
.cxid0 { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--vn-muted); }
.zjom7 { position: absolute; top: 100%; left: 0; right: 0; background: var(--vn-surf); border: 1px solid var(--vn-bdr); border-radius: 0 0 8px 8px; display: none; z-index: 200; max-height: 300px; overflow-y: auto; }
.zjom7 a { display: block; padding: .6rem .8rem; color: var(--vn-txt); border-bottom: 1px solid var(--vn-bdr); font-size: .84rem; }
.zjom7 a:last-child { border-bottom: none; }
.zjom7 a:hover { background: var(--vn-surf2); color: var(--vn-acc); }

/* === Cards — portrait with gradient overlay === */
.tqet2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.tdeo9 {
    background: var(--vn-surf);
    border: 1px solid var(--vn-bdr);
    border-radius: var(--vn-rad);
    overflow: hidden;
    position: relative;
    transition: transform .2s, box-shadow .2s;
    aspect-ratio: 3/4;
    display: flex;
    flex-direction: column;
}
.tdeo9:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(212,84,138,.2); }
.hkeh9 { display: block; position: absolute; inset: 0; }
.vjef1 { width: 100%; height: 100%; object-fit: cover; display: block; }
.tdeo9::after {
    content: '';
    position: absolute;
    inset: 40% 0 0 0;
    background: linear-gradient(to bottom, transparent, rgba(13,7,24,.92));
    pointer-events: none;
}
.efet0 {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1rem;
    z-index: 2;
}
.inep7 { font-size: 1rem; font-weight: 800; margin-bottom: .2rem; }
.inep7 a { color: #fff; }
.tlew1 { font-size: .78rem; color: rgba(255,255,255,.7); margin-bottom: .15rem; }
.ipeo2 { font-size: .75rem; color: var(--vn-acc); font-weight: 700; }
.kgeo3 { font-size: .74rem; color: rgba(255,255,255,.75); margin-top: .2rem; }
.hmec4 { color: var(--vn-acc); }

/* card without image */
.tdeo9:not(:has(.hkeh9)) { aspect-ratio: unset; min-height: 140px; }
.tdeo9:not(:has(.vjef1)) .efet0 { position: static; padding: 1rem; }
.tdeo9:not(:has(.vjef1)) .inep7 a { color: var(--vn-txt); }
.tdeo9:not(:has(.vjef1)) .tlew1 { color: var(--vn-muted); }
.tdeo9:not(:has(.vjef1)) .kgeo3 { color: var(--vn-muted); }

/* === Footer === */
.slir6 { background: var(--vn-surf); border-top: 1px solid var(--vn-bdr); }
.epig2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; padding: 2.5rem 0; }
.gnip5 h4 { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--vn-muted); margin-bottom: 1rem; }
.gnip5 a { display: block; font-size: .85rem; color: var(--vn-muted); margin-bottom: .35rem; transition: color .2s; }
.gnip5 a:hover { color: var(--vn-acc-h); }
.gnip5 p { font-size: .85rem; color: #c4b8d9; }
.kmiw5 { text-align: center; padding: 1rem 0; border-top: 1px solid var(--vn-bdr); font-size: .78rem; color: var(--vn-muted); }

/* === Pagination === */
.sdoi6 { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.sdoi6 a, .sdoi6 span {
    display: inline-block; padding: .45rem .85rem; border-radius: 999px;
    font-size: .85rem; font-weight: 700;
    background: var(--vn-surf); border: 1px solid var(--vn-bdr); color: #c4b8d9;
}
.sdoi6 a:hover { border-color: var(--vn-acc); color: var(--vn-acc); }
.sdoi6 .vtex3 { background: var(--vn-acc); border-color: var(--vn-acc); color: #fff; }

/* === Search form === */
.lkod3 { display: flex; gap: .5rem; margin-bottom: 2rem; }
.gmoe8 { flex: 1; background: var(--vn-surf); border: 1px solid var(--vn-bdr); border-radius: var(--vn-rad); padding: .65rem 1rem; color: var(--vn-txt); font-size: .95rem; outline: none; }
.gmoe8:focus { border-color: var(--vn-acc); }
.gmoe8::placeholder { color: var(--vn-muted); }
.tlov4 { background: var(--vn-acc); color: #fff; border: none; border-radius: var(--vn-rad); padding: .65rem 1.5rem; font-weight: 800; cursor: pointer; font-family: var(--vn-font); }
.tlov4:hover { background: var(--vn-acc-h); }

/* === Blog list === */
.twn4 { display: grid; gap: 1.5rem; }
.pnm4 { display: grid; grid-template-columns: 200px 1fr; gap: 1.25rem; background: var(--vn-surf); border: 1px solid var(--vn-bdr); border-radius: var(--vn-rad); overflow: hidden; }
.psr3 { width: 100%; height: 100%; object-fit: cover; }
.spo4 { padding: 1.25rem; }
.iqa3 { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--vn-acc); }
.pnm4 h2 { font-size: 1.1rem; font-weight: 800; margin: .4rem 0; }
.pnm4 h2 a { color: var(--vn-txt); }
.pnm4 h2 a:hover { color: var(--vn-acc); }
.wru8 { font-size: .78rem; color: var(--vn-muted); }
.pnm4 p { font-size: .88rem; color: #c4b8d9; margin: .5rem 0; }
.evo2 { font-size: .82rem; font-weight: 700; color: var(--vn-acc); }
@media (max-width: 600px) { .pnm4 { grid-template-columns: 1fr; } .otg8 { height: 160px; display: block; } }

/* === Article === */
.chl6 { width: 100%; border-radius: var(--vn-rad); margin: 1rem 0; max-height: 420px; object-fit: cover; }
.xge1 h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; }
.zje6 { display: flex; gap: 1rem; align-items: center; margin-top: .5rem; font-size: .82rem; color: var(--vn-muted); }
.tcx1 { color: var(--vn-acc); font-weight: 700; }
.wset3 { line-height: 1.75; color: var(--vn-txt); }
.wset3 h2 { font-size: 1.25rem; font-weight: 800; color: var(--vn-acc-h); margin: 1.5rem 0 .75rem; }
.wset3 h3 { color: var(--vn-txt); }
.wset3 p { margin-bottom: 1rem; color: var(--vn-txt); }
.wset3 a { color: var(--vn-acc); }
.wset3 a:hover { color: var(--vn-acc-h); }
.wset3 li { color: var(--vn-txt); }

/* === Blog categories nav === */
.ekb7 { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.plg2 { padding: .35rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 700; background: var(--vn-surf); border: 1px solid var(--vn-bdr); color: #c4b8d9; }
.nmj9, .plg2:hover { background: var(--vn-acc-soft); border-color: var(--vn-acc); color: var(--vn-acc); }

/* === Breadcrumb === */
.vxg4 { font-size: .8rem; color: var(--vn-muted); margin-bottom: 1.5rem; }
.vxg4 a { color: var(--vn-muted); }
.vxg4 a:hover { color: var(--vn-acc); }

/* === Empty state === */
.lvez6 { text-align: center; padding: 3rem 1rem; color: #c4b8d9; font-size: .95rem; }

@media (max-width: 700px) { .tqet2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .tqet2 { grid-template-columns: 1fr; } }