:root{
  --ink:#242019;
  --black:#111111;
  --lime:#ecff87;
  --lime-deep:#c8e857;
  --coral:#ff7b4f;
  --coral-strong:#ff5e00;
  --cream:#faf9f3;
  --cream-soft:#f2f0e6;
  --line:#e9e7dd;
  --shadow-sm:0 2px 8px rgba(20,20,10,.06);
  --shadow-md:0 10px 30px rgba(20,20,10,.08);
  --shadow-lg:0 20px 50px rgba(20,20,10,.14);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Manrope', Arial, sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.container{
  max-width:1160px;
  margin:0 auto;
  padding:0 24px;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* HEADER */
.site-header{
  background:var(--black);
  padding:0;
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 20px rgba(0,0,0,.25);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:36px;
  flex-wrap:wrap;
  padding:16px 24px;
}
.logo{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.logo-badge{
  background:linear-gradient(135deg,var(--lime),var(--lime-deep));
  color:var(--black);
  font-weight:800;
  width:40px;height:40px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  box-shadow:0 4px 12px rgba(236,255,135,.25);
}
.logo-text{color:#fff; font-weight:800; font-size:19px; letter-spacing:-.2px;}
.logo-text .accent{color:var(--lime);}

.nav-links{
  display:flex; gap:26px; flex:1; flex-wrap:wrap;
}
.nav-links a{
  color:#c9c9c0; font-size:14px; font-weight:600;
  padding:6px 0; position:relative;
  transition:color .2s;
}
.nav-links a:hover{color:#fff;}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--lime); transform:scaleX(0); transform-origin:left;
  transition:transform .25s;
}
.nav-links a:hover::after{transform:scaleX(1);}

.banner{
  background:repeating-linear-gradient(45deg,#3a3b34,#3a3b34 10px,#333429 10px,#333429 20px);
  color:#cfcfc7;
  border:1px dashed #6b6c60;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  text-align:center;
  overflow:hidden;
}
.banner img{width:100%; height:100%; object-fit:cover; display:block; border-radius:9px;}
.banner--header{flex-basis:100%; height:70px; order:3;}
.banner--sidebar{height:340px; margin-bottom:20px; border-radius:var(--radius-md); box-shadow:var(--shadow-sm);}

/* INTRO / HERO */
.intro{
  background:linear-gradient(180deg,#fff 0%, var(--cream) 100%);
  border-bottom:1px solid var(--line);
  padding:64px 0 56px;
  position:relative;
  overflow:hidden;
}
.intro::before{
  content:"";
  position:absolute; top:-120px; right:-120px;
  width:360px; height:360px;
  background:radial-gradient(circle, var(--lime) 0%, transparent 70%);
  opacity:.5;
  border-radius:50%;
}
.intro-inner{display:grid; grid-template-columns:1.6fr 1fr; gap:48px; position:relative; z-index:1; align-items:center;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line);
  padding:6px 14px; border-radius:30px;
  font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--coral-strong);
  margin-bottom:18px;
  box-shadow:var(--shadow-sm);
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--coral-strong);}
.about h1{
  font-size:38px; margin:0 0 16px; font-weight:800; line-height:1.15; letter-spacing:-.5px;
}
.about p{color:#5a5a52; font-size:17px; margin:0 0 26px; max-width:56ch;}
.btn-outline, .btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px;
  border-radius:30px;
  font-weight:700;
  font-size:14px;
  transition:all .2s;
}
.btn-outline{border:2px solid var(--black); background:transparent;}
.btn-outline:hover{background:var(--black); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-primary{
  border:none; color:var(--black);
  background:linear-gradient(135deg,var(--lime),var(--lime-deep));
  box-shadow:0 8px 20px rgba(236,255,135,.4);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(236,255,135,.55);}

.signup-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
  align-self:start;
  box-shadow:var(--shadow-md);
  position:relative;
}
.signup-box::before{
  content:""; position:absolute; inset:0 0 auto 0; height:6px;
  background:linear-gradient(90deg,var(--lime),var(--coral));
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.signup-box h3{margin:0 0 16px; font-size:18px; font-weight:800;}
.signup-box form{display:flex; flex-direction:column; gap:12px;}
.signup-box input{
  padding:13px 16px; border-radius:10px; border:1.5px solid var(--line); font-size:14px;
  font-family:inherit;
  transition:border-color .2s;
}
.signup-box input:focus{outline:none; border-color:var(--coral-strong);}
.signup-box button{
  background:var(--black); color:#fff; border:none;
  padding:13px 16px; border-radius:10px; font-weight:700; cursor:pointer; font-size:14px;
  transition:background .2s, transform .2s;
}
.signup-box button:hover{background:#000; transform:translateY(-1px);}
.signup-note{font-size:12px; color:#8a8b81; margin:14px 0 0;}
.signup-note a{color:var(--black); font-weight:700; text-decoration:underline;}

/* MAIN GRID */
.main-grid{
  display:grid;
  grid-template-columns:2.2fr 1fr;
  gap:40px;
  padding:52px 24px 70px;
}
.feed-title{
  font-size:24px; margin:0 0 26px; font-weight:800; letter-spacing:-.3px;
  position:relative; display:inline-block;
}
.feed-title::after{
  content:""; position:absolute; left:0; bottom:-8px; width:44px; height:4px;
  background:var(--coral); border-radius:4px;
}

.card{
  display:flex; gap:22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px;
  margin-bottom:20px;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.card img{width:190px; height:140px; object-fit:cover; border-radius:var(--radius-md); flex-shrink:0; transition:transform .4s ease;}
.card:hover img{transform:scale(1.04);}
.card-body{display:flex; flex-direction:column; gap:7px; min-width:0;}
.tag{
  display:inline-block; background:#fff0e9; color:var(--coral-strong);
  font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:20px; width:fit-content;
  text-transform:uppercase; letter-spacing:.03em;
}
.card h3{margin:4px 0 0; font-size:19px; font-weight:800; line-height:1.3;}
.card h3 a{transition:color .2s;}
.card h3 a:hover{color:var(--coral-strong);}
.card p{margin:0; color:#666; font-size:14.5px;}
.card-meta{font-size:12.5px; color:#9a9a90; margin-top:4px; display:flex; align-items:center; gap:6px;}

/* FEATURED CARD (first article) — must stay after base .card rules to win the cascade */
.card.featured{
  display:block;
  padding:0;
  overflow:hidden;
  margin-bottom:28px;
}
.card.featured img{width:100%; height:320px; object-fit:cover; border-radius:0;}
.card.featured .card-body{padding:26px 26px 28px;}
.card.featured h3{font-size:24px; line-height:1.25;}
.card.featured p{font-size:15.5px;}

.btn-more{
  display:block; width:100%; padding:16px;
  background:#fff; border:2px solid var(--black); border-radius:var(--radius-md);
  font-weight:700; cursor:pointer; font-size:14px;
  transition:all .2s;
}
.btn-more:hover{background:var(--black); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md);}

/* BREADCRUMBS */
.breadcrumbs{
  padding:20px 24px 0;
  font-size:13px;
  color:#9a9a90;
  max-width:1160px;
  margin:0 auto;
}
.breadcrumbs a{color:#9a9a90; transition:color .2s;}
.breadcrumbs a:hover{color:var(--coral-strong);}

/* ARTICLE PAGE */
.article-grid{
  display:grid;
  grid-template-columns:2.2fr 1fr;
  gap:40px;
  padding:20px 24px 70px;
  align-items:start;
}
.article h1{font-size:34px; margin:16px 0 12px; font-weight:800; line-height:1.2; letter-spacing:-.4px;}
.article .card-meta{margin-bottom:8px;}
.author-row{
  display:flex; align-items:center; gap:10px;
  margin-bottom:26px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.author-avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--lime),var(--coral));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:var(--black);
  flex-shrink:0;
}
.author-meta{font-size:13px; color:#8a8b81; line-height:1.4;}
.author-meta strong{color:var(--ink); font-size:14px; display:block;}
.article-cover{
  width:100%; height:400px; object-fit:cover; border-radius:var(--radius-lg);
  margin-bottom:30px; box-shadow:var(--shadow-md);
}
.article h2{font-size:23px; margin:34px 0 12px; font-weight:800; letter-spacing:-.2px;}
.article h3{font-size:19px; margin:28px 0 10px; font-weight:800;}
.article p{font-size:16.5px; color:#3d3e37; margin:0 0 16px;}
.article .summary{
  font-size:18px; color:var(--ink); font-weight:500;
  background:var(--cream-soft); border-left:4px solid var(--coral);
  padding:18px 22px; border-radius:0 var(--radius-md) var(--radius-md) 0;
  margin-bottom:8px;
}
.article .callout{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:22px 24px; margin:28px 0; box-shadow:var(--shadow-sm);
}
.article .callout h3{margin-top:0;}

@media(max-width:800px){
  .article-grid{grid-template-columns:1fr;}
  .article-cover{height:230px;}
}

/* SIDEBAR */
.sidebar-block{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm);}
.sidebar-block h4{margin:0 0 14px; font-size:15px; font-weight:800;}
.cat-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.cat-list li a{
  display:flex; justify-content:space-between; align-items:center;
  font-size:14px; padding:10px 12px; border-radius:10px;
  transition:background .2s;
}
.cat-list li a:hover{background:var(--cream-soft);}
.cat-list li a span{
  color:var(--black); background:var(--lime);
  font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:20px;
}

/* FOOTER */
.site-footer{background:var(--black); color:#cfcfc7; padding:48px 0 24px; margin-top:20px; position:relative;}
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--lime),var(--coral));
}
.footer-inner{display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px;}
.footer-logo{margin-bottom:12px;}
.site-footer h4{color:#fff; font-size:14px; margin:0 0 12px; font-weight:800;}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.site-footer a{transition:color .2s;}
.site-footer a:hover{color:var(--lime);}
.site-footer p{font-size:13px; color:#9d9e93; max-width:38ch;}
.copyright{border-top:1px solid #2a2b25; margin-top:28px; padding-top:18px; font-size:12px; color:#7d7e73;}

@media(max-width:800px){
  .intro-inner{grid-template-columns:1fr;}
  .main-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
  .card{flex-direction:column;}
  .card img{width:100%; height:190px;}
  .card.featured img{height:220px;}
  .about h1{font-size:28px;}
  .nav-links{order:2; gap:18px;}
}