:root{
  --bg:#f3efe6;
  --ink:#1c1a16;
  --muted:#6b655a;
  --paper:#fffaf0;
  --brand:#b3882e;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --max:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Cairo',sans-serif;background:var(--bg);color:var(--ink);}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:18px}

.head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2d9c9}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:50%;background:radial-gradient(120% 120% at 50% 30%, #ffd26e, #b3882e 45%, #6b4f13 80%);box-shadow:inset 0 2px 6px rgba(0,0,0,.2)}
h1{margin:0;font-size:1.4rem}
small{color:var(--muted)}

.tabs{display:flex;gap:10px}
.tabs a{padding:8px 12px;border-radius:999px;border:1px solid #e2d9c9;color:#4a4338}
.tabs a.active{background:#fff;border-color:#eadfcd}

.hero{margin:20px 0}
.feature{position:relative;border-radius:var(--radius);overflow:hidden;background:#ddd;box-shadow:var(--shadow);border:1px solid #eadfcd}
.feature img{width:100%;height:380px;object-fit:cover;display:block;filter:saturate(1.05)}
.feature .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55))}
.feature .meta{position:absolute;inset:auto 0 0 0;padding:16px;color:#fff}
.badge{background:rgba(255,255,255,.2);padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.4)}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #d7c8a9;padding:10px 14px;border-radius:12px;font-weight:700}
.btn.brand{background:var(--brand);border-color:transparent;color:#fff}
.btn.sm{padding:8px 10px;border-radius:10px}

.section-title{display:flex;align-items:center;justify-content:space-between;margin:26px 0 12px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#fff;border:1px solid #eadfcd;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.thumb img{width:100%;height:180px;object-fit:cover}
.body{padding:14px}
.body h4{margin:0 0 8px}
.body p{margin:0 0 10px;color:#5b5347}
.meta-row{display:flex;gap:12px;color:#7a7267;font-size:.9rem;margin-bottom:8px}

.list{display:grid;gap:10px;margin-top:10px}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:flex-start;background:#fff;border:1px solid #eadfcd;border-radius:12px;padding:12px}
.row .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);margin-top:8px}
.row .date{color:#7a7267}

.foot{border-top:1px solid #e2d9c9;margin-top:24px;color:#7a7267}

@media (max-width: 900px){
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  .grid{grid-template-columns:1fr}
  .feature img{height:260px}
}