@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Public+Sans:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root{
  --coral:#FF6B4A; --coral-deep:#F0522F;
  --teal:#00BFA6; --teal-deep:#00967F;
  --purple:#7C4DFF; --purple-deep:#6236E0;
  --pink:#FF3E9A;
  --yellow:#FFC93C;
  --sky:#3BB1E8; --sky-deep:#1D7FB8;
  --ink:#1A1A2E; --slate:#4A4A63; --steel:#7A7A94; --muted:#B4B4C6;
  --cream:#FFFBF5; --paper:#FFFFFF; --surface:#F5F3FF; --surface-warm:#FFF3ED;
  --line:#EDEBFA;
  --radius:22px; --radius-sm:14px;
}
*{box-sizing:border-box;}
html{overflow-x:hidden;}
body{margin:0; overflow-x:hidden; font-family:'Public Sans',sans-serif; color:var(--ink); background:var(--cream); line-height:1.65;}
h1,h2,h3,h4{font-family:'Manrope',sans-serif; margin:0 0 .5em; font-weight:700; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 24px;}

/* chips / tags, colored per category */
.chip{display:inline-flex; align-items:center; gap:6px; font-family:'Manrope',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; padding:5px 13px; border-radius:9999px; color:#fff; white-space:nowrap;}
.chip.coral{background:var(--coral);} .chip.teal{background:var(--teal);} .chip.purple{background:var(--purple);}
.chip.pink{background:var(--pink);} .chip.yellow{background:var(--yellow); color:#3A2A05;} .chip.sky{background:var(--sky);}
.chip-outline{background:transparent; border:1.5px solid var(--line); color:var(--slate);}
.chip-outline:hover{border-color:var(--teal); color:var(--teal-deep);}

.btn{display:inline-flex; align-items:center; gap:8px; font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px; padding:12px 22px; border-radius:9999px; border:none; cursor:pointer; background:linear-gradient(135deg,var(--teal),var(--sky)); color:#fff; box-shadow:0 8px 20px rgba(0,150,166,.25); transition:transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,150,166,.32);}
.btn-outline{background:transparent; color:var(--ink); border:2px solid var(--ink);}
.btn-sm{padding:8px 16px; font-size:13px;}
.btn-danger{background:#D9364A;}

/* nav */
.nav{position:sticky; top:0; z-index:20; background:rgba(255,251,245,.92); backdrop-filter:blur(12px); border-bottom:1.5px solid var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px;}
.logo{display:flex; align-items:center; gap:10px;}
.logo-img{height:56px; width:auto; display:block; object-fit:contain;}
@media (max-width:400px){ .logo-img{height:44px;} }
.logo-mark{width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--teal),var(--sky)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; flex-shrink:0;}
.logo .sub{display:block; font-family:'Public Sans',sans-serif; font-weight:500; font-size:9.5px; color:var(--steel); text-transform:uppercase; letter-spacing:.4px;}
.nav-links{display:flex; align-items:center; gap:22px; font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:600; color:var(--slate);}
.nav-links a:hover, .nav-links a:active{color:var(--teal-deep);}
.nav-links a.btn, .nav-links .btn{white-space:nowrap; flex-shrink:0; font-size:13px; padding:9px 18px;}

@media (max-width:680px){
  .nav-inner{gap:8px; flex-wrap:wrap; height:auto; min-height:64px; padding-top:10px; padding-bottom:10px;}
  .nav-links{gap:16px; row-gap:10px; min-width:0; flex-wrap:wrap; justify-content:flex-start; width:100%;}
  .nav-links a:not(.btn){font-size:12.5px; white-space:nowrap;}
  .nav-links a.btn, .nav-links .btn{padding:9px 16px; font-size:13px; margin-left:auto;}
}

/* hero — calm, peaceful blue/turquoise/aqua tone */
.blog-hero{position:relative; overflow:hidden; padding:64px 20px 84px; text-align:center; background:linear-gradient(120deg,var(--sky) 0%,var(--teal) 55%,var(--sky-deep) 100%); clip-path:polygon(0 0,100% 0,100% 94%,0 100%);}
.blob{position:absolute; border-radius:50%; filter:blur(50px); opacity:.35; z-index:0;}
.blog-hero .blob-1{width:380px; height:380px; background:#fff; top:-160px; left:-110px;}
.blog-hero .blob-2{width:320px; height:320px; background:var(--sky-deep); bottom:-140px; right:-100px;}
.blog-hero > *:not(.blob){position:relative; z-index:1;}
.blog-hero .eyebrow{display:inline-block; font-family:'Manrope',sans-serif; font-weight:800; font-size:12.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--teal-deep); background:rgba(255,255,255,.92); padding:7px 18px; border-radius:9999px; margin-bottom:27px; box-shadow:0 6px 18px rgba(0,0,0,.1);}
.blog-hero h1{font-size:42px; line-height:1.1; max-width:720px; margin:0 auto .45em; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.15);}
.blog-hero p{color:rgba(255,255,255,.92); font-size:16.5px; font-weight:500; max-width:540px; margin:0 auto;}
.hero-tags{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px;}
.hero-tags a{font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.3px; color:#fff; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.4); padding:8px 16px; border-radius:9999px; backdrop-filter:blur(4px); transition:transform .15s ease, background .15s ease;}
.hero-tags a:hover{background:rgba(255,255,255,.3); transform:translateY(-2px);}

/* layout: posts + sidebar */
.blog-layout{display:grid; grid-template-columns:1fr 280px; gap:40px; padding-top:36px; padding-bottom:70px; align-items:start;}
@media (max-width:900px){ .blog-layout{grid-template-columns:1fr;} }

.post-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px;}
@media (max-width:640px){ .post-grid{grid-template-columns:1fr;} }

/* filter sidebar layout — used on the homepage listing */
.filter-layout{display:grid; grid-template-columns:260px 1fr; gap:44px; padding-top:40px; padding-bottom:70px; align-items:start;}
@media (max-width:900px){
  .filter-layout{display:flex; flex-direction:column; gap:16px; padding-top:24px; padding-bottom:50px;}
  .filter-layout > main{order:1; width:100%;}
  .filter-layout > .filters-panel{order:2; width:100%;}
}

.filters-panel{position:sticky; top:84px;}
@media (max-width:900px){ .filters-panel{position:static; top:auto;} }

/* the filters accordion collapses on mobile (via the summary toggle, JS
   removes the `open` attribute on small screens on load); on larger
   screens it stays open by default and the toggle row is hidden so it
   reads as a normal always-visible sidebar */
.filters-accordion{border:none;}
.filters-summary{display:none;}
@media (max-width:900px){
  .filters-accordion{padding:5px 5px 0;}
  .filters-summary{display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px; color:var(--ink); padding:13px 16px; background:#fff; border:1.5px solid var(--line); border-radius:12px;}
  .filters-summary::-webkit-details-marker{display:none;}
  .filters-summary::after{content:'▾'; font-size:12px; color:var(--steel);}
  .filters-accordion[open] .filters-summary::after{content:'▴';}
  .filters-accordion > .filters-body{padding-top:16px;}
}
.filters-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;}
.filters-head h2{font-size:20px; margin:0;}
.clear-link{font-family:'Public Sans',sans-serif; font-size:13px; color:var(--steel); text-decoration:underline; background:none; border:none; cursor:pointer; padding:0;}
.clear-link:hover, .clear-link:active{color:var(--teal-deep);}
.filter-divider{border:none; border-top:1.5px solid var(--line); margin:16px 0;}
.filter-group-title{font-family:'Manrope',sans-serif; font-weight:700; font-size:13px; color:var(--slate); margin-bottom:12px;}
.filter-checkbox{display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink); padding:6px 0; cursor:pointer;}
.filter-checkbox input{width:17px; height:17px; accent-color:var(--teal); cursor:pointer;}
.filter-keyword{display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:11px 14px; margin-top:6px;}
.filter-keyword input{border:none; outline:none; font-family:inherit; font-size:14px; width:100%; background:transparent;}

.sort-row{display:flex; justify-content:flex-end; margin-bottom:22px;}
.sort-select{font-family:'Manrope',sans-serif; font-weight:600; font-size:13.5px; color:var(--slate); border:1.5px solid var(--line); border-radius:10px; padding:9px 14px; background:#fff; cursor:pointer; margin-right:5px;}

.grid-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 26px;}
@media (max-width:900px){ .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .grid-cards{grid-template-columns:1fr;} }
.grid-card{display:flex; flex-direction:column;}
.grid-card .thumb{aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden; background:linear-gradient(135deg,var(--surface),var(--surface-warm)); margin-bottom:16px;}
.grid-card .thumb img{width:100%; height:100%; object-fit:cover;}
.grid-card .cat-label{font-family:'Manrope',sans-serif; font-weight:700; font-size:13px; color:var(--teal-deep); margin-bottom:6px;}
.grid-card h3{font-size:19px; line-height:1.3; margin-bottom:10px;}
.grid-card h3 a:hover, .grid-card h3 a:active{color:var(--teal-deep);}
.grid-card .excerpt{font-size:14px; color:var(--steel); margin-bottom:16px;}
.grid-card .author-row{display:flex; align-items:center; gap:10px; margin-top:auto;}
.grid-card .author-row .avatar{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--sky)); flex-shrink:0; overflow:hidden;}
.grid-card .author-row .avatar img{width:100%; height:100%; object-fit:cover;}
.grid-card .author-row .name{font-weight:700; font-size:13.5px;}
.grid-card .author-row .meta{font-size:12px; color:var(--muted);}

.post-card{background:#fff; border:1.5px solid var(--line); border-top:4px solid transparent; border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.post-card:hover{transform:translateY(-4px); box-shadow:0 18px 38px rgba(26,26,46,.14);}
.post-card.accent-coral{border-top-color:var(--coral);} .post-card.accent-teal{border-top-color:var(--teal);} .post-card.accent-purple{border-top-color:var(--purple);}
.post-card.accent-pink{border-top-color:var(--pink);} .post-card.accent-yellow{border-top-color:var(--yellow);} .post-card.accent-sky{border-top-color:var(--sky);}
.post-card .thumb{aspect-ratio:16/10; background:linear-gradient(135deg,var(--surface),var(--surface-warm)); overflow:hidden;}
.post-card .thumb img{width:100%; height:100%; object-fit:cover;}
.post-card .body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.post-card h3{font-size:17px; line-height:1.35;}
.post-card h3 a:hover, .post-card h3 a:active{color:var(--teal-deep);}
.post-card .excerpt{font-size:13.5px; color:var(--steel); flex:1;}
.post-card .meta{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); font-family:'Poppins',sans-serif; font-weight:500;}
.post-card .meta a{color:var(--steel);}
.post-card .meta a:hover{color:var(--teal-deep);}
.post-card .top-row{display:flex; justify-content:space-between; align-items:center;}

.post-card.featured{grid-column:1 / -1; display:grid; grid-template-columns:1.1fr 1fr;}
.post-card.featured .thumb{aspect-ratio:auto; height:100%;}
.post-card.featured h3{font-size:24px;}
@media (max-width:640px){ .post-card.featured{grid-template-columns:1fr;} }

/* sidebar */
.side-card{background:#fff; border:1.5px solid var(--line); border-top:4px solid var(--teal); border-radius:var(--radius-sm); padding:20px; margin-bottom:20px;}
.side-card:nth-of-type(2){border-top-color:var(--sky);}
.side-card:nth-of-type(3){border-top-color:var(--sky-deep);}
.side-card h4{font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--steel); margin-bottom:14px;}
.side-list{display:flex; flex-direction:column; gap:10px;}
.side-list a{display:flex; justify-content:space-between; gap:10px; font-size:13.5px; font-weight:600; color:var(--slate);}
.side-list a:hover, .side-list a:active{color:var(--teal-deep);}
.side-list .count{color:var(--muted); font-weight:500;}
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}

.author-mini{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.author-mini .avatar{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--sky)); flex-shrink:0; overflow:hidden;}
.author-mini .avatar img{width:100%; height:100%; object-fit:cover;}
.author-mini .name{font-weight:700; font-size:14px;}
.author-mini .role{font-size:12px; color:var(--steel);}

/* pagination */
.pagination{display:flex; justify-content:center; gap:8px; margin-top:36px;}
.pagination a, .pagination span{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; font-family:'Manrope',sans-serif; font-weight:600; font-size:13.5px; border:1.5px solid var(--line); background:#fff; color:var(--slate);}
.pagination a:hover{border-color:var(--coral);}
.pagination .current{background:linear-gradient(135deg,var(--teal),var(--sky)); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(0,150,166,.28);}

/* single post */
.post-header{position:relative; overflow:hidden; padding:56px 0 64px; text-align:center; background:linear-gradient(120deg,var(--sky) 0%,var(--teal) 55%,var(--sky-deep) 100%); clip-path:polygon(0 0,100% 0,100% 94%,0 100%);}
.post-header .blob{position:absolute; border-radius:50%; filter:blur(50px); opacity:.35; z-index:0;}
.post-header .blob-1{width:300px; height:300px; background:#fff; top:-130px; left:-90px;}
.post-header .blob-2{width:260px; height:260px; background:var(--sky-deep); bottom:-120px; right:-90px;}
.post-header > *{position:relative; z-index:1;}
.post-header .chip{margin-bottom:14px; box-shadow:0 6px 18px rgba(0,0,0,.15);}
.post-header h1{font-size:36px; max-width:760px; margin:0 auto .4em; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.15);}
.post-header .meta{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.85); font-family:'Poppins',sans-serif; font-weight:500;}
.post-header .meta a{color:#fff; font-weight:700;}
.post-featured-image{border-radius:var(--radius); overflow:hidden; margin:24px 0 8px; aspect-ratio:4/3; background:linear-gradient(135deg,var(--surface),var(--surface-warm));}
.post-featured-image img{width:100%; height:100%; object-fit:cover;}

.post-content{font-size:16.5px; line-height:1.85; color:var(--slate); padding:20px 0 10px;}
.post-content h2{font-size:23px; margin-top:1.3em;}
.post-content h3{font-size:19px; margin-top:1.1em;}
.post-content p{margin:0 0 1.1em;}
.post-content img{border-radius:var(--radius-sm); margin:1.2em 0;}
.post-content ul, .post-content ol{margin:0 0 1.1em; padding-left:1.3em;}
.post-content a{color:var(--teal-deep); text-decoration:underline;}
.post-content blockquote{margin:1.4em 0; padding:4px 0 4px 20px; border-left:4px solid var(--coral); color:var(--ink); font-weight:600; font-style:italic;}

.post-footer{border-top:1.5px solid var(--line); margin-top:34px; padding-top:26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
.author-card{display:flex; gap:16px; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); padding:22px; margin-top:30px; align-items:flex-start;}
.author-card .avatar{width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--sky)); flex-shrink:0; overflow:hidden;}
.author-card .avatar img{width:100%; height:100%; object-fit:cover;}
.author-card .bio{font-size:13.5px; color:var(--steel); margin-top:4px;}

/* section head */
.section-head{text-align:center; max-width:600px; margin:0 auto 30px;}
.section-head .eyebrow{display:inline-block; font-family:'Manrope',sans-serif; font-weight:700; font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:var(--teal-deep); margin-bottom:8px;}
.section-head h1{font-size:28px;}
.section-head p{color:var(--steel); font-size:14px;}

/* sub-hero — same calm banner treatment as the homepage hero, used atop category/author/archive/search pages */
.sub-hero{position:relative; overflow:hidden; padding:44px 0 56px; background:linear-gradient(120deg,var(--sky) 0%,var(--teal) 55%,var(--sky-deep) 100%); clip-path:polygon(0 0,100% 0,100% 92%,0 100%);}
.sub-hero .blob{position:absolute; border-radius:50%; filter:blur(50px); opacity:.35; z-index:0;}
.sub-hero .blob-1{width:280px; height:280px; background:#fff; top:-120px; left:-90px;}
.sub-hero .blob-2{width:240px; height:240px; background:var(--sky-deep); bottom:-110px; right:-80px;}
.sub-hero .section-head{position:relative; z-index:1; margin-bottom:0;}
.sub-hero .section-head .eyebrow{color:var(--teal-deep); background:rgba(255,255,255,.92); padding:7px 18px; border-radius:9999px; box-shadow:0 6px 18px rgba(0,0,0,.1); margin-bottom:14px;}
.sub-hero .section-head h1{color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.15);}
.sub-hero .section-head p{color:rgba(255,255,255,.92); font-weight:500;}
.sub-hero .chip{box-shadow:0 6px 18px rgba(0,0,0,.15);}

.empty-state{text-align:center; padding:60px 20px; color:var(--steel);}

/* footer */
footer{background:var(--ink); color:var(--muted); padding:44px 0 26px; margin-top:20px; border-top:4px solid transparent; border-image:linear-gradient(90deg,var(--sky),var(--teal),var(--sky-deep)) 1;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; align-items:center;}
footer a{color:var(--muted);}
footer a:hover{color:#fff;}
footer .foot-links{display:flex; gap:18px; font-size:13px; flex-wrap:wrap;}
footer small{display:block; margin-top:18px; font-size:11.5px; opacity:.7;}

/* forms (admin) */
.admin-body{background:var(--surface); font-family:'Public Sans',sans-serif; color:var(--ink); min-height:100vh; margin:0;}
.admin-wrap{max-width:1100px; margin:0 auto; padding:30px 24px 60px;}
.admin-nav{background:var(--ink); color:#fff; padding:0 24px;}
.admin-nav .wrap{max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:60px;}
.admin-nav a{color:rgba(255,255,255,.75); font-family:'Manrope',sans-serif; font-weight:600; font-size:13.5px; margin-right:18px;}
.admin-nav a:hover, .admin-nav a.active{color:#fff;}
.card{background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:24px; margin-bottom:22px;}
.form-row{margin-bottom:16px;}
.form-row label{display:block; font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--slate); margin-bottom:6px;}
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password], .form-row input[type=file],
.form-row select, .form-row textarea{width:100%; padding:11px 14px; border:1.5px solid var(--line); border-radius:10px; font-family:inherit; font-size:14.5px; background:#fff;}
.form-row textarea{min-height:130px; resize:vertical;}
.form-row .hint{font-size:12px; color:var(--steel); margin-top:4px;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:640px){ .two-col{grid-template-columns:1fr;} }
table.admin-table{width:100%; border-collapse:collapse; font-size:14px;}
table.admin-table th{text-align:left; font-family:'Manrope',sans-serif; font-size:12px; text-transform:uppercase; color:var(--steel); padding:10px 12px; border-bottom:2px solid var(--line);}
table.admin-table td{padding:12px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.admin-table tr:hover{background:var(--surface);}
.status-pill{font-size:11px; font-weight:700; padding:4px 10px; border-radius:9999px; text-transform:uppercase;}
.status-pill.published{background:#DFF7EF; color:#0B9A6B;}
.status-pill.draft{background:#F1F0F5; color:var(--steel);}
.alert{padding:14px 18px; border-radius:12px; font-size:13.5px; margin-bottom:18px;}
.alert-success{background:#DFF7EF; color:#0B7A54;}
.alert-error{background:#FFE3E3; color:#B3261E;}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--cream);}
.login-box{width:100%; max-width:360px; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); padding:34px;}
#editor-toolbar{display:flex; flex-wrap:wrap; gap:4px; border:1.5px solid var(--line); border-bottom:none; border-radius:10px 10px 0 0; padding:8px; background:#fafafa;}
#editor-toolbar button{border:1px solid var(--line); background:#fff; border-radius:6px; padding:6px 10px; font-size:13px; cursor:pointer; font-family:'Manrope',sans-serif;}
#editor-toolbar button:hover{background:var(--surface);}
#content-editor{border:1.5px solid var(--line); border-radius:0 0 10px 10px; min-height:360px; padding:16px; font-size:15px; line-height:1.7; outline:none;}