@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
    --bg: #FAF9F5;
    --surface: #FFFFFF;
    --ink: #14171B;
    --ink-soft: #5C6470;
    --border: #E7E3D9;
    --teal: #4EC2B6;
    --teal-deep: #2E9C91;
    --coral: #E1596B;
    --lime: #F2D65B;
    --shadow: 0 1px 2px rgba(20,23,27,.04), 0 8px 24px rgba(20,23,27,.05);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Manrope', -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }

h1,h2,h3{
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0 0 .4em;
}

.eyebrow{
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--teal-deep);
}

.wrap{ max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Header */
header.site-header{
    position: sticky; top:0; z-index: 50;
    background: rgba(250,249,245,.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.site-header .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:16px; padding-bottom:16px;
}
.site-logo{
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.3rem;
    display:flex; align-items:center; gap:8px;
}
.site-logo .dot{
    width:9px; height:9px; border-radius:50%;
    background: linear-gradient(135deg, var(--teal), var(--coral));
}
.site-nav{ display:flex; gap:28px; font-size:.92rem; font-weight:600; }
.site-nav a{ color: var(--ink-soft); transition: color .15s; }
.site-nav a:hover{ color: var(--teal-deep); }

/* Hero with shader canvas */
.hero{
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}
.hero canvas{
    position:absolute; inset:0; width:100%; height:100%;
    filter: blur(18px) saturate(1.1);
    opacity: .7;
}
.hero-inner{
    position: relative; z-index: 2;
    padding: 88px 24px 70px;
    max-width: 780px; margin: 0 auto; text-align:center;
}
.hero h1{
    font-size: clamp(2.4rem, 5.4vw, 4rem);
}
.hero p{
    color: var(--ink-soft);
    font-size: 1.15rem;
    max-width: 560px; margin: 0 auto;
}

/* Post grid */
.post-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    padding: 56px 0 80px;
}
.post-card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
    display:flex; flex-direction:column;
}
.post-card:hover{ transform: translateY(-4px); box-shadow: 0 4px 8px rgba(20,23,27,.06), 0 16px 32px rgba(20,23,27,.08); }
.post-card .thumb{
    aspect-ratio: 16/10; width:100%; object-fit:cover;
    background: linear-gradient(135deg, #EFF7F5, #FCEFE9);
}
.post-card .thumb.placeholder{
    display:flex; align-items:center; justify-content:center;
}
.post-card .thumb.placeholder svg{ width:38%; opacity:.35; }
.post-card .body{ padding: 20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.post-card h3{ font-size:1.22rem; }
.post-card .sub{
    color: var(--ink-soft); font-size:.94rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}
.post-card .date{ margin-top:auto; padding-top:10px; }

/* Single post */
.post-page{ max-width: 760px; margin: 0 auto; padding: 56px 24px 100px; }
.post-page .eyebrow{ display:block; margin-bottom: 14px; }
.post-page h1{ font-size: clamp(1.9rem, 4.4vw, 2.7rem); }
.post-page .sub{ font-size:1.2rem; color: var(--ink-soft); margin-bottom: 30px; }
.post-page .hero-img{
    width:100%; border-radius: 18px; margin: 8px 0 36px;
    aspect-ratio: 16/9; object-fit: cover;
    box-shadow: var(--shadow);
}
.post-page .content{ font-size: 1.08rem; }
.post-page .content p{ margin: 0 0 22px; }
.post-page .content h2{ font-size:1.5rem; margin-top:44px; }
.post-page .content h3{ font-size:1.2rem; margin-top:32px; }
.post-page .content img{
    width:100%; border-radius:18px; margin: 34px 0;
    aspect-ratio: 16/9; object-fit:cover;
    box-shadow: var(--shadow);
}
.post-page .content ul, .post-page .content ol{ padding-left: 1.3em; margin: 0 0 22px; }
.post-page .content a{ color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.post-page .content blockquote{
    margin: 30px 0; padding: 4px 0 4px 20px;
    border-left: 3px solid var(--coral);
    color: var(--ink-soft); font-style: italic;
}
.back-link{
    display:inline-flex; align-items:center; gap:6px;
    font-size:.88rem; font-weight:600; color: var(--ink-soft);
    margin-bottom: 26px;
}
.back-link:hover{ color: var(--teal-deep); }

/* Footer */
footer.site-footer{
    border-top: 1px solid var(--border);
    padding: 34px 0 50px;
    color: var(--ink-soft); font-size: .85rem;
}
footer.site-footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* Admin */
.admin-shell{ max-width: 880px; margin: 0 auto; padding: 48px 24px 90px; }
.admin-bar{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom: 30px;
}
.admin-bar h1{ font-size:1.5rem; }
.btn{
    display:inline-flex; align-items:center; gap:6px;
    background: var(--ink); color:#fff;
    border:none; border-radius:10px;
    padding: 11px 18px; font-family:'Manrope',sans-serif; font-weight:700; font-size:.92rem;
    cursor:pointer;
}
.btn.secondary{ background: transparent; color: var(--ink); border:1px solid var(--border); }
.btn.danger{ background: #D14343; }
.admin-post-row{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 0; border-bottom: 1px solid var(--border);
    gap: 16px;
}
.admin-post-row .meta{ display:flex; flex-direction:column; gap:3px; }
.admin-post-row .meta .t{ font-weight:700; }
.admin-post-row .meta .d{ font-size:.8rem; color: var(--ink-soft); font-family:'JetBrains Mono',monospace; }
.status-pill{
    font-size:.7rem; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.05em;
    padding: 3px 9px; border-radius:100px; border:1px solid var(--border);
}
.status-pill.live{ background:#EAF7EC; border-color:#BFE3C4; color:#1F7A34; }
.status-pill.draft{ background:#FBF3E4; border-color:#F0D9A8; color:#96690F; }
.row-actions{ display:flex; gap:10px; font-size:.85rem; font-weight:600; }
.row-actions a{ color: var(--teal-deep); }
.row-actions .del{ color:#D14343; }

.admin-form label{
    display:block; font-weight:700; font-size:.85rem; margin: 22px 0 8px;
}
.admin-form label:first-of-type{ margin-top:0; }
.admin-form input[type=text], .admin-form textarea, .admin-form input[type=file]{
    width:100%; padding: 12px 14px; border:1px solid var(--border); border-radius:10px;
    font-family:'Manrope',sans-serif; font-size:.98rem; background:#fff;
}
.admin-form textarea{ min-height: 320px; resize: vertical; font-family:'JetBrains Mono',monospace; font-size:.88rem; line-height:1.6; }
.admin-form .hint{ font-size:.8rem; color: var(--ink-soft); margin-top:6px; }
.admin-form .current-img{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.admin-form .current-img img{ width:90px; height:60px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }
.admin-form .checkbox-row{ display:flex; align-items:center; gap:8px; margin-top:22px; }
.admin-form .checkbox-row input{ width:auto; }
.admin-form .actions{ margin-top:34px; display:flex; gap:12px; }

.auth-wrap{ max-width: 380px; margin: 90px auto; padding: 0 24px; }
.auth-wrap h2{ font-size:1.5rem; margin-bottom:20px; }
.auth-wrap input{
    width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px;
    font-family:'Manrope',sans-serif; font-size:.98rem; margin-bottom:14px;
}
.auth-error{
    background:#FDECEC; color:#B23434; border:1px solid #F5C6C6;
    padding:10px 14px; border-radius:8px; font-size:.88rem; margin-bottom:16px;
}

@media (max-width: 640px){
    .site-nav{ gap:16px; font-size:.82rem; }
    .hero-inner{ padding: 64px 20px 50px; }
    .admin-bar{ flex-direction:column; align-items:flex-start; gap:14px; }
}