.site-header{

position:sticky;
top:0;
z-index:999;

background:rgba(251,249,246,.75);
box-shadow:
0 1px 0 rgba(0,0,0,.03);
backdrop-filter:blur(20px);

border-bottom:1px solid var(--border);

}

.header-inner{

display:flex;
justify-content:space-between;
align-items:center;

height:80px;

}

.logo a{

display:flex;
align-items:center;

font-size:1.6rem;
font-weight:800;

letter-spacing:-1px;

}

.logo-main{

color:var(--text);

}

.logo-accent{

color:var(--accent);

}

.main-menu{

display:flex;
gap:32px;

list-style:none;

}

.main-menu a{

position:relative;

font-weight:500;

padding:6px 0;

}
.main-menu a::after{

content:"";

position:absolute;

left:0;
bottom:0;

width:0;
height:2px;

background:var(--accent);

transition:.25s;

}
.main-menu a:hover::after{

width:100%;

}
.main-menu a:hover{

color:var(--accent);

}
/* =======================
   HERO
======================= */

.hero{

min-height:85vh;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

}

.hero .container{

max-width:900px;

}

.hero-title{

font-size:clamp(4rem,10vw,8rem);

font-weight:800;

letter-spacing:-4px;

line-height:1;

margin-bottom:40px;

}

/* =======================
   SEARCH
======================= */

.howto-search{

display:flex;

align-items:center;

background:#fff;

border-radius:999px;

padding:10px;

box-shadow:
0 10px 40px rgba(0,0,0,.05);

margin-bottom:40px;

}

.howto-search input{

flex:1;

border:none;

outline:none;

background:none;

padding:18px 24px;

font-size:1.1rem;

}

.howto-search button{

border:none;

background:var(--accent);

color:#fff;

padding:16px 28px;

border-radius:999px;

cursor:pointer;

font-weight:600;

transition:.25s;

}

.howto-search button:hover{

opacity:.9;

}

/* =======================
   CATEGORY PILLS
======================= */

.category-pills{

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

}

.pill{

padding:12px 18px;

border-radius:999px;

background:#fff;

border:1px solid var(--border);

transition:.25s;

font-size:.95rem;

}

.pill:hover{

background:var(--accent);

color:#fff;

border-color:var(--accent);

}
@media(max-width:768px){

.hero{

padding:80px 0;

}

.howto-search{

flex-direction:column;

border-radius:24px;

}

.howto-search input{

width:100%;

}

.howto-search button{

width:100%;

}

}
/* =========================
   ARCHIVE PAGE
========================= */

.archive-page{

padding:80px 0;

}

.archive-header{

margin-bottom:60px;

text-align:center;

}

.archive-title{

font-size:clamp(2.5rem,5vw,4rem);

font-weight:800;

letter-spacing:-2px;

margin-bottom:15px;

}

.archive-description{

max-width:700px;

margin:auto;

color:var(--muted);

}

/* =========================
   GRID
========================= */

.archive-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:30px;

}

/* =========================
   CARD
========================= */

.guide-card{

background:#fff;

border-radius:24px;

overflow:hidden;

border:1px solid var(--border);

transition:.25s;

}

.guide-card:hover{

transform:translateY(-5px);

box-shadow:
0 20px 40px rgba(0,0,0,.06);

}

.card-image img{

width:100%;

height:220px;

object-fit:cover;

}

.card-content{

padding:24px;

}

.card-meta{

font-size:.85rem;

color:var(--muted);

margin-bottom:12px;

}

.card-title{

font-size:1.35rem;

font-weight:700;

line-height:1.3;

margin-bottom:14px;

}

.card-excerpt{

color:var(--muted);

font-size:.95rem;

}

/* =========================
   PAGINATION
========================= */

.pagination-wrap{

margin-top:60px;

display:flex;

justify-content:center;

}

.nav-links{

display:flex;

gap:10px;

}

.page-numbers{

padding:12px 16px;

background:#fff;

border:1px solid var(--border);

border-radius:12px;

}

.page-numbers.current{

background:var(--accent);

color:#fff;

border-color:var(--accent);

}

/* =========================
   EMPTY
========================= */

.empty-state{

padding:100px 0;

text-align:center;

}

.empty-state h2{

margin-bottom:10px;

}
/* =========================
   SINGLE PAGE
========================= */

.single-page{

padding:80px 0;

}

.container-small{

width:min(92%,780px);

margin:auto;

}

/* =========================
   ARTICLE HEADER
========================= */

.article-header{

margin-bottom:50px;

}

.article-meta{

display:flex;

align-items:center;

gap:16px;

margin-bottom:20px;

font-size:.95rem;

}

.article-category{

background:#fff;

padding:8px 14px;

border-radius:999px;

border:1px solid var(--border);

font-weight:600;

}

.article-category:hover{

background:var(--accent);

color:#fff;

}

.article-date{

color:var(--muted);

}

.article-title{

font-size:clamp(2.5rem,6vw,4rem);

font-weight:800;

line-height:1.1;

letter-spacing:-2px;

}

/* =========================
   FEATURED IMAGE
========================= */

.article-featured-image{

width:min(92%,1000px);

margin:50px auto;

}

.article-featured-image img{

width:100%;

border-radius:24px;

}

/* =========================
   CONTENT
========================= */

.article-content{

font-size:1.2rem;

line-height:1.9;

}

.article-content p{

margin-bottom:28px;

}

.article-content h2{

font-size:2rem;

margin-top:60px;

margin-bottom:20px;

line-height:1.2;

}

.article-content h3{

font-size:1.5rem;

margin-top:40px;

margin-bottom:15px;

}

.article-content ul,
.article-content ol{

margin-left:28px;

margin-bottom:28px;

}

.article-content li{

margin-bottom:10px;

}

.article-content blockquote{

border-left:4px solid var(--accent);

padding-left:20px;

margin:30px 0;

font-style:italic;

}

.article-content img{

border-radius:20px;

margin:40px auto;

}

.article-content pre{

background:#f4f4f4;

padding:24px;

border-radius:16px;

overflow:auto;

margin:30px 0;

}

.article-content code{

font-family:monospace;

}

/* =========================
   ARTICLE FOOTER
========================= */

.article-footer{

margin-top:80px;

padding-top:40px;

border-top:1px solid var(--border);

}

.back-home{

font-weight:600;

}

.back-home:hover{

color:var(--accent);

}
/* =========================
   SEARCH PAGE
========================= */

.search-page{

padding:80px 0;

}

.search-header{

text-align:center;

margin-bottom:60px;

}

.search-title{

font-size:clamp(2.5rem,5vw,4rem);

font-weight:800;

letter-spacing:-2px;

margin-bottom:16px;

}

.search-query{

font-size:1.1rem;

color:var(--muted);

}

.search-query strong{

color:var(--text);

font-weight:700;

}

/* =========================
   EMPTY SEARCH
========================= */

.search-empty{

max-width:700px;

margin:auto;

text-align:center;

padding:80px 0;

}

.search-empty h2{

font-size:2rem;

margin-bottom:12px;

}

.search-empty p{

margin-bottom:30px;

color:var(--muted);

}

.search-empty .howto-search{

margin-top:30px;

}
/* =========================
   PAGE TEMPLATE
========================= */

.page-template{

padding:80px 0;

}

.page-title{

font-size:clamp(2.5rem,5vw,4rem);

font-weight:800;

line-height:1.1;

margin-bottom:40px;

letter-spacing:-2px;

}

.page-content{

font-size:1.15rem;

line-height:1.9;

}

.page-content p{

margin-bottom:24px;

}

.page-content h2{

margin-top:50px;

margin-bottom:20px;

}

.page-content h3{

margin-top:35px;

margin-bottom:15px;

}
/* =========================
   404
========================= */

.error-404{

min-height:70vh;

display:flex;

align-items:center;

justify-content:center;

padding:100px 0;

}

.error-box{

text-align:center;

max-width:700px;

margin:auto;

}

.error-number{

display:block;

font-size:8rem;

font-weight:800;

line-height:1;

margin-bottom:20px;

letter-spacing:-4px;

color:var(--accent);

}

.error-box h1{

font-size:3rem;

margin-bottom:20px;

}

.error-box p{

color:var(--muted);

margin-bottom:30px;

}

.return-home{

display:inline-block;

padding:14px 24px;

background:var(--accent);

color:#fff;

border-radius:999px;

font-weight:600;

transition:.25s;

}

.return-home:hover{

transform:translateY(-2px);

}
/* =========================
   FOOTER
========================= */

.site-footer{

margin-top:120px;

padding:80px 0;

border-top:1px solid var(--border);

}

.footer-content{

text-align:center;

}

.footer-logo{

font-size:2rem;

font-weight:800;

margin-bottom:10px;

}

.footer-tagline{

color:var(--muted);

margin-bottom:20px;

}

.footer-copy{

font-size:.9rem;

color:var(--muted);

}
.breadcrumb{

margin-bottom:25px;

font-size:.9rem;

color:var(--muted);

}

.breadcrumb a{

color:var(--accent);

}
/* =========================
   GUIDE CARD (PRO)
========================= */

.guide-card{

background:#fff;

border:1px solid var(--border);

border-radius:24px;

overflow:hidden;

transition:.25s;

display:flex;

flex-direction:column;

}

.guide-card:hover{

transform:translateY(-6px);

box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.card-image{

height:220px;

background:#f4f4f4;

overflow:hidden;

}

.card-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.3s;

}

.guide-card:hover .card-image img{

transform:scale(1.05);

}

.placeholder{

display:flex;

align-items:center;

justify-content:center;

color:#999;

font-size:.9rem;

}

.card-content{

padding:22px;

}

.card-meta{

display:flex;

justify-content:space-between;

font-size:.85rem;

color:var(--muted);

margin-bottom:10px;

}

.card-category{

color:var(--accent);

font-weight:600;

}

.card-title{

font-size:1.3rem;

font-weight:700;

line-height:1.3;

margin-bottom:12px;

}

.card-excerpt{

font-size:.95rem;

color:var(--muted);

line-height:1.6;

}