* { margin: 0; padding: 0; box-sizing: border-box; }

/* FAF8F5 */
:root {
  --color-bg: #D4E0C9;      
  --color-bg-secondary: #FFFFFF;
  --color-card: #F5F1ED;
  --color-text: #2C2C2C;
  --color-text-secondary: #6B6B6B;
  --color-border: #E5E0DC;
  --color-accent: #D4E0C9;
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;
  --transition: all 0.3s ease;
}

html { scroll-behavior: smooth; }

body{
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #D5D0CC; }

* { scrollbar-width: thin; scrollbar-color: var(--color-border) var(--color-bg); }

h1,h2,h3{
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
}


.container{ max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.container-small{ max-width: 1024px; margin: 0 auto; padding: 0 1.5rem; }


.navigation{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(212,224,201,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.nav-container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;

  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.logo-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#3b82f6;
  box-shadow: 0 0 0 6px rgba(59,130,246,.15);
  flex: 0 0 auto;
}

.logo-text{
  font-size: 14px;
  line-height: 1;
  color: var(--color-text);
}

.logo:hover .logo-text{
  color: var(--color-text-secondary);
}


.nav-menu{ display: flex; gap: 2rem; align-items: center; }

.nav-link{
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition);
}
.nav-link:hover{ color: var(--color-text); }

.menu-toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
}

.hamburger{
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  position: relative;
  transition: var(--transition);
}
.hamburger::before,
.hamburger::after{
  content:'';
  position:absolute;
  width:24px;
  height:2px;
  background: var(--color-text);
  transition: var(--transition);
}
.hamburger::before{ top:-8px; }
.hamburger::after{ bottom:-8px; }

.menu-toggle.active .hamburger{ background: transparent; }
.menu-toggle.active .hamburger::before{ top:0; transform: rotate(45deg); }
.menu-toggle.active .hamburger::after{ bottom:0; transform: rotate(-45deg); }


.hero{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6rem 1.5rem 3rem;
  text-align:center;
}

.hero-content{
  max-width: 56rem;
  animation: fadeInUp .8s ease-out;
}

.hero-title{
  font-size: clamp(3rem, 8vw, 4.5rem);
  margin-bottom: 1.5rem;
  color: var(--color-text);
}

.hero-subtitle{
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: var(--color-text-secondary);
  font-weight: 300;
}

.hero-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
}

.divider-line{
  width: 4rem;
  height: 1px;
  background: #302c2c2d; 
}

.divider-dot{
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #0000007c; 
}

.featured-post{
  padding: 0;              
  margin: 0;
}

.featured-post .container{
  max-width: none;
  padding: 0;
  margin: 0;
}

.featured-card{
  position: relative;
  width: 100%;
  height: clamp(420px, 65vh, 650px);
  border-radius: 0;        
  overflow: hidden;
  cursor: pointer;
  background: #000;        
}

.featured-image{
  width: 100%;
  height: 100%;
  display: block;          
  object-fit: cover;
  transform: scale(1);     
  transition: transform 0.7s ease;  
}

.featured-card:hover .featured-image{
  transform: scale(1.05);
}

.featured-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.70) 0%,
    rgba(0,0,0,0.30) 55%,
    transparent 100%
  );
}

.featured-content{
  position:absolute;
  bottom:0; left:0; right:0;
  padding: 2rem;
  color: #fff;
}

.featured-badge{
  display:inline-block;
  padding: .25rem 1rem;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border-radius: 9999px;
  font-size: .875rem;
  margin-bottom: 1rem;
}

.featured-title{
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1rem;
  max-width: 48rem;
}

.featured-excerpt{
  font-size: 1.125rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 1.5rem;
  max-width: 42rem;
}

.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  background: rgba(71, 55, 55, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: .375rem;
  color:#fff;
  font-size: .9375rem;
  font-weight: 500;
  cursor:pointer;
  transition: var(--transition);
  text-decoration:none;
}
.btn-outline:hover{ background:#fff; color: var(--color-text); }
.arrow-icon{ transition: transform .3s ease; }
.btn-outline:hover .arrow-icon{ transform: translateX(4px); }

/* Blog Grid */
.blog-grid{
  padding: 5rem 1.5rem;
  background: rgba(245,241,237,0.3);
}

.section-header{ text-align:center; margin-bottom: 4rem; }
.section-title{ font-size: clamp(2.5rem,5vw,3rem); margin-bottom:1rem; color: var(--color-text); }
.section-subtitle{ font-size: 1.125rem; color: var(--color-text-secondary); max-width: 42rem; margin:0 auto; }

.posts-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.post-card{
  background: var(--color-card);
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: var(--transition);
  cursor:pointer;
  display:block;
  text-decoration:none;
  color: inherit;
}
.post-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),
              0 10px 10px -5px rgba(0,0,0,0.04);
}

.post-image-wrapper{ position:relative; height: 16rem; overflow:hidden; }
.post-image{
  width:100%;
  height:100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.post-card:hover .post-image{ transform: scale(1.1); }

.post-category{
  position:absolute;
  top:1rem; left:1rem;
  padding:.25rem .75rem;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-radius: 9999px;
  font-size:.75rem;
  font-weight: 500;
  color: var(--color-text);
}

.post-content{ padding: 1.5rem; }

.post-title{
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: .75rem;
  color: var(--color-text);
  transition: var(--transition);
}
.post-card:hover .post-title{ color: var(--color-text-secondary); }

.post-excerpt{
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-meta{
  display:flex;
  gap: 1rem;
  font-size: .875rem;
  color: var(--color-text-secondary);
}
.meta-item{ display:flex; align-items:center; gap:.25rem; }


.footer{
  padding: 3rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: rgba(245,241,237,0.2);
}

.footer-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-title{ font-size: 1.5rem; font-weight:700; margin-bottom:.75rem; color: var(--color-text); }
.footer-heading{ font-size: 1rem; font-weight:600; margin-bottom:.75rem; color: var(--color-text); }
.footer-text{ font-size:.875rem; color: var(--color-text-secondary); margin-bottom:1rem; }

.footer-links{ list-style:none; }
.footer-links li{ margin-bottom:.5rem; }
.footer-links a{ font-size:.875rem; color: var(--color-text-secondary); text-decoration:none; transition: var(--transition); }
.footer-links a:hover{ color: var(--color-text); }

.newsletter-form{ display:flex; gap:.5rem; margin-bottom:.5rem; }
.newsletter-input{
  flex:1;
  padding:.5rem 1rem;
  font-size:.875rem;
  border:1px solid var(--color-border);
  border-radius:.375rem;
  background: var(--color-bg-secondary);
  font-family: var(--font-sans);
}
.newsletter-input:focus{ outline:none; border-color: var(--color-text); }

.newsletter-btn{
  padding:.5rem 1rem;
  font-size:.875rem;
  font-weight:500;
  background: var(--color-text);
  color:#fff;
  border:none;
  border-radius:.375rem;
  cursor:pointer;
  transition: var(--transition);
  font-family: var(--font-sans);
}
.newsletter-btn:hover{ background: var(--color-text-secondary); }

.form-message{ font-size:.875rem; margin-top:.5rem; min-height:1.25rem; }
.form-message.success{ color:#10b981; }
.form-message.error{ color:#ef4444; }

.footer-bottom{ padding-top:2rem; border-top:1px solid var(--color-border); text-align:center; }
.copyright{
  font-size:.875rem;
  color: var(--color-text-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.heart-icon{ color:#ef4444; }


@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(30px); }
  to{ opacity:1; transform: translateY(0); }
}


@media (max-width: 768px){
  .menu-toggle{ display:block; }

  .nav-menu{
    position: fixed;
    top: 65px;
    left: 0; right: 0;
    flex-direction: column;
    background: var(--color-bg);
    padding: 2rem;
    gap: 1.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transform: translateX(100%);
    transition: transform .3s ease;
  }
  .nav-menu.active{ transform: translateX(0); }

  .posts-grid{ grid-template-columns: 1fr; }
  .featured-content{ padding: 1.25rem; }
  .footer-grid{ grid-template-columns: 1fr; }
  .newsletter-form{ flex-direction: column; }
}

@media (min-width: 769px) and (max-width: 1024px){
  .posts-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px){
  .posts-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  
}