:root{
  --cream:#EADBC8;
  --cream-dark:#DACAB8;
  --cream-light:#F8F0E5;
  --cream-soft:#FFFBF5;
  --deep-purple:#000000;
  --purple-dark:#111111;
  --purple-mid:#222222;
  --purple-light:#333333;
  --text-white:#ffffff;
  --text-light:#f5f5f5;
  --text-gray:#d1d1d1;
  --brunette:#69433e;
  --cavolo-nero:#7191a0;
  --food:#C45C28;
  --travel:#2E6E4F;
  --design:#5D5D5D;
  --technology:#1A1A1A;
  --health:#6B2737;
  --primary:var(--cream);
  --primary-dark:var(--cream-dark);
  --primary-light:var(--cream-light);
  --secondary:var(--purple-mid);
  --background:var(--deep-purple);
  --text-color:var(--text-white);
  --text-secondary:var(--text-light);
  --border-color:rgba(234,219,200,0.3);
  --overlay:rgba(0,0,0,0.85);
  --thumb-height:320px;
  --thumb-height-md:240px;
  --thumb-height-sm:180px;
  --thumb-height-xs:150px;
  --space-unit:1rem;
  --space-xs:calc(0.5 * var(--space-unit));
  --space-sm:calc(0.75 * var(--space-unit));
  --space-md:calc(1.25 * var(--space-unit));
  --space-lg:calc(2 * var(--space-unit));
  --space-xl:calc(3.25 * var(--space-unit));
  --shadow-sm:0 2px 8px rgba(0,0,0,0.15);
  --shadow-md:0 4px 12px rgba(0,0,0,0.2);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.25);
  --shadow-xl:0 12px 36px rgba(0,0,0,0.3);
  --transition-fast:0.2s ease;
  --transition-medium:0.4s cubic-bezier(0.215,0.61,0.355,1);
  --transition-slow:0.6s cubic-bezier(0.19,1,0.22,1);
  --font-base:'Lato',sans-serif;
  --font-heading:'Playfair Display',serif;
  --font-size-base:1rem;
  --line-height-base:1.7
}

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

html{
  scroll-behavior:smooth;
  font-size:100%
}

body{
  font-family:var(--font-base);
  color:var(--text-white);
  line-height:var(--line-height-base);
  background:var(--background);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:var(--font-size-base);
  overflow-x:hidden
}

body,body.category,body.archive,body.blog,body.search{
  background:var(--background)!important
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.25;
  margin-bottom:var(--space-md);
  color:var(--cream);
  letter-spacing:-0.01em
}

h1{
  font-size:clamp(2rem,5vw,2.75rem);
  letter-spacing:-0.02em
}

h2{
  font-size:clamp(1.75rem,4vw,2.25rem)
}

h3{
  font-size:clamp(1.5rem,3.5vw,1.75rem)
}

p{
  margin-bottom:var(--space-md);
  font-size:clamp(1rem,1.05vw,1.05rem);
  color:var(--text-light)
}

a{
  color:var(--cream-light);
  text-decoration:none;
  transition:all var(--transition-fast);
  position:relative
}

a:hover{
  color:var(--cream);
  text-shadow:0 0 8px rgba(234,219,200,0.3)
}

.container{
  width:100%;
  max-width:1260px;
  margin:0 auto;
  padding:0 var(--space-md);
  display:flex;
  flex-direction:column;
  align-items:center
}

.site-content{
  padding:var(--space-xl) 0;
  background:transparent;
  min-height:60vh;
  width:100%
}

.archive-header,.category-header{
  text-align:center;
  padding:clamp(4rem,10vw,6.25rem) 0 clamp(3rem,7vw,4.375rem);
  background:linear-gradient(135deg,var(--purple-dark) 0%,var(--deep-purple) 100%)!important;
  margin-bottom:var(--space-xl);
  position:relative;
  overflow:hidden;
  width:100%
}

.archive-header::before,.category-header::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NCwwLjAyKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==');
  opacity:0.3
}

.archive-title,.category-title{
  font-size:clamp(2.5rem,6vw,3.5rem);
  color:var(--cream);
  position:relative;
  display:inline-block;
  margin-bottom:var(--space-lg);
  z-index:1
}

.archive-title::after,.category-title::after{
  content:'';
  position:absolute;
  bottom:-1.25rem;
  left:50%;
  transform:translateX(-50%);
  width:100px;
  height:4px;
  background:var(--cream);
  border-radius:2px
}

.archive-description{
  max-width:700px;
  margin:0 auto;
  font-size:clamp(1rem,1.1vw,1.1rem);
  color:var(--text-light);
  opacity:0.9
}

.pagination{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--space-xs);
  margin:var(--space-xl) 0 var(--space-lg)
}

.pagination .page-numbers{
  padding:var(--space-sm) var(--space-md);
  border-radius:6px;
  background:transparent;
  color:var(--cream);
  font-weight:700;
  transition:all var(--transition-medium);
  border:1px solid var(--cream);
  min-width:46px;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center
}

.pagination .page-numbers.current,.pagination .page-numbers:hover{
  background:var(--cream);
  color:var(--deep-purple);
  border-color:var(--cream)
}

.pagination .page-numbers.dots{
  background:transparent;
  color:var(--text-light);
  border-color:transparent
}

::-webkit-scrollbar{
  width:10px;
  height:10px
}

::-webkit-scrollbar-track{
  background:var(--purple-dark)
}

::-webkit-scrollbar-thumb{
  background:var(--cream);
  border-radius:5px
}

::-webkit-scrollbar-thumb:hover{
  background:var(--cream-light)
}

.entry-content,.hentry,.widget-area,.sidebar,#primary,#secondary,.content-area,.main-content,.page-header,.inside-article,.site-main{
  background:transparent!important
}

.author-name,.byline,.post-author,.entry-author,span.author{
  display:none!important
}

.wpf-top-bar{
  background-color:var(--purple-dark);
  padding:var(--space-sm) 0;
  border-bottom:1px solid var(--border-color);
  position:relative
}

.wpf-top-social{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--space-xs);
  margin-bottom:var(--space-sm)
}

.wpf-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  background-color:var(--purple-mid);
  border-radius:50%;
  color:var(--cream);
  transition:all var(--transition-medium);
  border:1px solid var(--border-color);
  flex-shrink:0
}

.wpf-social:hover{
  background-color:var(--cream);
  color:var(--deep-purple)
}

.logo-text{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:var(--space-sm);
  gap:var(--space-xs)
}

.steps,.harmony{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(1.5rem,5vw,2rem);
  color:var(--text-white);
  letter-spacing:0.5px;
  line-height:1
}

.of{
  font-family:var(--font-base);
  font-weight:300;
  font-size:clamp(1rem,3vw,1.5rem);
  color:var(--text-light);
  position:relative;
  top:-2px
}

.harmony{
  color:var(--cream);
  position:relative
}

.harmony::after{
  content:'';
  position:absolute;
  bottom:2px;
  left:0;
  width:100%;
  height:2px;
  background:var(--cream);
  opacity:0.3
}

.wpf-top-left{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:clamp(0.5rem,2vw,1.5rem)
}

.wpf-top-left a{
  color:var(--text-light);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(0.75rem,2.5vw,0.875rem);
  letter-spacing:0.5px;
  position:relative;
  padding:5px 0;
  white-space:nowrap
}

.wpf-top-left a::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background:var(--cream);
  transition:width var(--transition-medium)
}

.wpf-top-left a:hover{
  color:var(--cream)
}

.wpf-top-left a:hover::after{
  width:100%
}

.wpf-search-bar{
  position:absolute;
  top:100%;
  right:0;
  background-color:var(--purple-mid);
  padding:var(--space-sm);
  border-radius:6px;
  display:none;
  z-index:100;
  width:min(300px,90vw);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-md)
}

.wpf-search-bar.active{
  display:block;
  animation:fadeInDown 0.3s ease-out
}

@keyframes fadeInDown{
  from{
    opacity:0;
    transform:translateY(-10px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}

.mobile-menu-toggle{
  display:none;
  background:transparent;
  border:none;
  color:var(--cream);
  font-size:1.5rem;
  cursor:pointer;
  padding:var(--space-xs);
  margin-left:auto
}

.posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--space-lg);
  margin:var(--space-xl) auto;
  max-width:calc(100% - (2 * var(--space-md)));
  width:100%
}

.archive .posts-grid,.category .posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--space-lg);
  margin:var(--space-xl) auto;
  max-width:calc(100% - (2 * var(--space-md)));
  width:100%
}

.post-card{
  --card-radius:8px;
  --content-padding:var(--space-md);
  background:linear-gradient(to bottom,var(--purple-mid) 0%,var(--purple-dark) 100%);
  border-radius:var(--card-radius);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  position:relative;
  border:1px solid var(--border-color);
  transition:all var(--transition-medium);
  height:100%
}

.post-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-xl);
  border-color:var(--cream)
}

.post-thumbnail-container{
  height:var(--thumb-height);
  background:var(--purple-mid);
  position:relative;
  overflow:hidden;
  border-radius:var(--card-radius) var(--card-radius) 0 0;
  display:flex;
  align-items:center;
  justify-content:center
}

.post-thumbnail{
  width:100%;
  height:100%;
  position:relative
}

.post-thumbnail img,.post-thumbnail-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform var(--transition-slow)
}

.post-card:hover .post-thumbnail img,.post-card:hover .post-thumbnail-image{
  transform:scale(1.05)
}

.card-content{
  padding:var(--content-padding);
  flex-grow:1;
  display:flex;
  flex-direction:column
}

.card-content h3{
  font-size:clamp(1.25rem,1.5vw,1.5rem);
  margin-bottom:var(--space-sm);
  line-height:1.4;
  color:var(--cream)
}

.card-excerpt{
  color:var(--text-light);
  margin-bottom:var(--space-md);
  font-size:clamp(0.875rem,1vw,0.95rem);
  opacity:0.9
}

.card-meta{
  display:flex;
  align-items:center;
  margin-top:auto;
  font-size:clamp(0.75rem,1vw,0.85rem);
  color:var(--cream-light);
  flex-wrap:wrap;
  gap:var(--space-sm)
}

.card-meta svg{
  margin-right:6px;
  width:14px;
  height:14px;
  fill:var(--cream-light)
}

.card-meta span{
  display:flex;
  align-items:center
}

.card-category{
  --badge-padding:6px 14px;
  --badge-radius:20px;
  --badge-font-size:clamp(0.65rem,1vw,0.7rem);
  display:inline-block;
  padding:var(--badge-padding);
  border-radius:var(--badge-radius);
  font-size:var(--badge-font-size);
  font-weight:700;
  text-transform:uppercase;
  margin:var(--space-sm) 0 var(--space-xs);
  color:var(--text-white);
  align-self:flex-start;
  letter-spacing:0.5px;
  box-shadow:var(--shadow-sm);
  z-index:2
}

.card-category[data-cat=food],.category-food .card-category{
  background:var(--food)
}

.card-category[data-cat=travel],.category-travel .card-category{
  background:var(--travel)
}

.card-category[data-cat=design],.category-design .card-category{
  background:var(--design)
}

.card-category[data-cat=technology],.category-technology .card-category{
  background:var(--technology);
  color:var(--text-white)!important
}

.card-category[data-cat=health],.category-health .card-category{
  background:var(--health)
}

.single-post .entry-header h1{
  background:linear-gradient(135deg,var(--cream) 0%,var(--cream-dark) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 2px 8px rgba(0,0,0,0.2);
  margin-bottom:var(--space-md)
}

.table-of-contents{
  background:linear-gradient(135deg,var(--purple-dark) 0%,rgba(0,0,0,0.8) 100%);
  border:1px solid var(--cream);
  border-radius:12px;
  padding:var(--space-lg);
  margin:var(--space-xl) 0;
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden
}

.table-of-contents::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:var(--cream)
}

.table-of-contents ol{
  counter-reset:toc-counter;
  padding-left:var(--space-md)
}

.table-of-contents li{
  counter-increment:toc-counter;
  margin-bottom:var(--space-sm);
  position:relative;
  padding-left:var(--space-lg)
}

.table-of-contents li::before{
  content:counter(toc-counter);
  position:absolute;
  left:0;
  top:0;
  background:var(--cream);
  color:var(--deep-purple);
  width:26px;
  height:26px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:0.9rem
}

.entry-content h2{
  color:var(--cream-light);
  font-weight:700;
  padding-bottom:var(--space-sm);
  margin-top:var(--space-xl);
  font-size:clamp(1.8rem,2vw,2.2rem)
}

.entry-content h3{
  color:var(--cream);
  font-weight:600;
  margin-top:var(--space-lg);
  font-size:clamp(1.5rem,1.8vw,1.8rem)
}

.entry-content h4{
  color:var(--cream-dark);
  font-weight:600;
  margin-top:var(--space-md);
  font-size:clamp(1.25rem,1.5vw,1.5rem)
}

.entry-content table{
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  border:none
}

.entry-content table th{
  background:linear-gradient(to right,var(--cream),var(--cream-dark));
  color:var(--deep-purple);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-size:1.05rem
}

.entry-content table tr:nth-child(even){
  background-color:rgba(234,219,200,0.05)
}

.entry-content blockquote{
  border-left:6px solid var(--cream);
  background:linear-gradient(to right,rgba(34,34,34,0.8) 0%,transparent 100%);
  padding:var(--space-lg) var(--space-xl);
  border-radius:0 12px 12px 0;
  margin:var(--space-xl) 0;
  box-shadow:var(--shadow-sm)
}

.entry-content blockquote::before{
  font-size:5rem;
  top:-1.5rem;
  left:0.5rem
}

.entry-content img{
  border:2px solid var(--cream);
  box-shadow:var(--shadow-lg);
  transition:transform 0.4s ease,box-shadow 0.4s ease
}

.entry-content img:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 30px rgba(0,0,0,0.3)
}

.faq-section{
  background:var(--purple-dark);
  border-radius:12px;
  padding:var(--space-lg);
  margin:var(--space-xl) 0;
  border:1px solid var(--cream)
}

.faq-section h4{
  color:var(--cream);
  font-size:1.4rem;
  margin-bottom:var(--space-sm);
  display:flex;
  align-items:center
}

.faq-section h4::before{
  content:"?";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  background:var(--cream);
  color:var(--deep-purple);
  border-radius:50%;
  margin-right:var(--space-sm);
  font-weight:700
}

.call-to-action{
  text-align:center;
  padding:var(--space-xl);
  background:linear-gradient(135deg,var(--purple-dark) 0%,var(--deep-purple) 100%);
  border-radius:16px;
  margin:var(--space-xl) 0;
  border:2px solid var(--cream);
  position:relative;
  overflow:hidden
}

.call-to-action::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 Q50,20 100,0 L100,100 Q50,80 0,100 Z" fill="rgba(234,219,200,0.05)"/></svg>');
  background-size:cover
}

.call-to-action h3{
  font-size:2.2rem;
  margin-bottom:var(--space-md);
  position:relative
}

@media (max-width:768px){
  .table-of-contents{
    padding:var(--space-md)
  }
  .call-to-action{
    padding:var(--space-lg) var(--space-md)
  }
}

.custom-footer{
  background:var(--deep-purple);
  color:var(--text-light);
  font-family:var(--font-base);
  position:relative;
  z-index:10;
  border-top:1px solid var(--cream)
}

.footer-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--space-lg);
  padding:var(--space-xl) var(--space-md) var(--space-lg);
  max-width:1200px;
  margin:auto
}

.footer-container a[href*=blogarama]{
  display:none!important
}

.footer-column{
  display:flex;
  flex-direction:column;
  text-align:left;
  align-items:flex-start;
  gap:var(--space-sm)
}

.footer-column h3{
  color:var(--cream);
  font-family:var(--font-heading);
  font-size:clamp(1.15rem,1.35vw,1.35rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin:0 0 var(--space-md) 0;
  padding-bottom:var(--space-sm);
  position:relative;
  width:100%
}

.footer-column h3::after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  background:var(--cream);
  position:absolute;
  bottom:0;
  left:0;
  transition:width var(--transition-medium)
}

.footer-column h3:hover::after{
  width:100%
}

.footer-column ul{
  list-style:none;
  padding:0;
  margin:0;
  width:100%
}

.footer-column ul li{
  margin:var(--space-sm) 0
}

.footer-column ul li a{
  color:var(--text-light);
  text-decoration:none;
  font-weight:400;
  font-size:clamp(0.85rem,0.95vw,0.95rem);
  transition:all var(--transition-fast);
  display:inline-block
}

.footer-column ul li a:hover{
  color:var(--cream);
  transform:translateX(3px)
}

.footer-column.about{
  flex-direction:column
}

.about-heading{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  margin-bottom:var(--space-md)
}

.about-heading i.fas.fa-spa{
  font-size:clamp(1.5rem,2vw,2rem);
  color:var(--cream);
  background:var(--purple-dark);
  padding:var(--space-xs);
  border-radius:50%;
  box-shadow:var(--shadow-sm)
}

.about-heading .site-title{
  font-size:clamp(1.15rem,1.35vw,1.35rem);
  font-weight:700;
  margin:0;
  text-transform:uppercase;
  letter-spacing:0.5px;
  white-space:nowrap;
  background:linear-gradient(90deg,var(--cream),var(--cream-dark));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent
}

.about-text{
  font-size:clamp(0.85rem,0.95vw,0.95rem);
  line-height:1.7;
  color:var(--text-light);
  margin-bottom:var(--space-md)
}

.social-icons{
  margin-top:var(--space-md);
  display:flex;
  gap:var(--space-sm);
  flex-wrap:wrap
}

.social-circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(36px,42px,42px);
  height:clamp(36px,42px,42px);
  background:var(--cream);
  color:var(--deep-purple);
  border-radius:50%;
  font-size:clamp(16px,18px,18px);
  text-decoration:none;
  transition:all var(--transition-medium)
}

.social-circle:hover{
  background:var(--cream-light);
  transform:translateY(-3px) scale(1.05)
}

.newsletter-form{
  display:flex;
  flex-direction:column;
  width:100%;
  gap:var(--space-sm)
}

.newsletter-form input[type=email]{
  padding:var(--space-sm);
  border:1px solid var(--border-color);
  background-color:var(--purple-dark);
  color:var(--text-light);
  border-radius:6px;
  font-size:var(--font-size-base);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast)
}

.newsletter-form input[type=email]:focus{
  outline:none;
  border-color:var(--cream);
  box-shadow:0 0 0 3px rgba(234,219,200,0.2)
}

.newsletter-form button{
  padding:var(--space-sm);
  background:linear-gradient(to right,var(--cream),var(--cream-dark));
  border:none;
  color:var(--deep-purple);
  font-weight:bold;
  font-size:var(--font-size-base);
  cursor:pointer;
  border-radius:6px;
  transition:all var(--transition-medium)
}

.newsletter-form button:hover{
  filter:brightness(1.1);
  transform:translateY(-2px)
}

.footer-bottom{
  background:var(--deep-purple);
  width:100%;
  padding:var(--space-sm) 0;
  border-top:1px solid var(--border-color)
}

.footer-bottom-content{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-sm);
  padding:0 var(--space-md)
}

.footer-bottom-content p{
  margin:0;
  font-size:clamp(0.85rem,0.95vw,0.95rem);
  color:var(--cream)
}

.footer-links{
  display:flex;
  gap:var(--space-md);
  flex-wrap:wrap
}

.footer-links a{
  color:var(--text-light);
  text-decoration:none;
  font-weight:500;
  position:relative;
  font-size:clamp(0.85rem,0.95vw,0.95rem)
}

.footer-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:1px;
  background:var(--cream);
  transition:width var(--transition-medium)
}

.footer-links a:hover::after{
  width:100%
}

@media (max-width:992px){
  .posts-grid,.archive .posts-grid,.category .posts-grid{
    gap:var(--space-md);
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    max-width:calc(100% - (2 * var(--space-sm)))
  }
  .post-thumbnail-container{
    height:var(--thumb-height-md)
  }
  .archive .post-thumbnail-container,.category .post-thumbnail-container{
    height:var(--thumb-height-md)!important
  }
}

@media (max-width:768px){
  .container{
    padding:0 var(--space-sm)
  }
  .site-content{
    padding:var(--space-lg) 0
  }
  .wpf-top-left{
    flex-direction:column;
    align-items:center;
    gap:var(--space-xs)
  }
  .logo-text{
    flex-direction:column;
    gap:0
  }
  .steps,.harmony,.of{
    font-size:clamp(1.25rem,5vw,1.5rem);
    line-height:1
  }
  .footer-container{
    grid-template-columns:1fr;
    gap:var(--space-md);
    padding:var(--space-lg) var(--space-sm) var(--space-md)
  }
  .footer-column{
    align-items:center;
    text-align:center
  }
  .footer-column h3{
    text-align:center
  }
  .footer-column h3::after{
    left:50%;
    transform:translateX(-50%)
  }
  .about-heading{
    justify-content:center;
    flex-direction:column;
    text-align:center
  }
  .about-text{
    text-align:center
  }
  .social-icons{
    justify-content:center
  }
  .footer-bottom-content{
    flex-direction:column;
    text-align:center
  }
  .footer-links{
    justify-content:center
  }
  .mobile-menu-toggle{
    display:block
  }
  .wpf-top-left{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:var(--purple-dark);
    padding:var(--space-sm);
    box-shadow:var(--shadow-md);
    border-bottom:1px solid var(--border-color);
    z-index:99
  }
  .wpf-top-left.active{
    display:flex;
    animation:fadeInDown 0.3s ease-out
  }
}

@media (max-width:576px){
  .posts-grid,.archive .posts-grid,.category .posts-grid{
    grid-template-columns:1fr;
    max-width:100%
  }
  .post-thumbnail-container{
    height:var(--thumb-height-sm)
  }
  .archive .post-thumbnail-container,.category .post-thumbnail-container{
    height:var(--thumb-height-sm)!important
  }
  .entry-content{
    font-size:clamp(0.9rem,1vw,1rem)
  }
  .entry-content h2{
    font-size:clamp(1.25rem,1.5vw,1.5rem)
  }
  .entry-content table{
    font-size:clamp(0.8rem,0.95vw,0.95rem)
  }
  .footer-column{
    padding:0 var(--space-xs)
  }
}

@media (max-width:480px){
  .post-thumbnail-container{
    height:var(--thumb-height-xs)
  }
  .archive .post-thumbnail-container,.category .post-thumbnail-container{
    height:var(--thumb-height-xs)!important
  }
  .wpf-social{
    width:32px;
    height:32px
  }
  .footer-links{
    gap:var(--space-sm)
  }
}

.archive .post-thumbnail-container,.category .post-thumbnail-container{
  height:var(--thumb-height)!important
}

@media (max-width:992px){
  .archive .post-thumbnail-container,.category .post-thumbnail-container{
    height:var(--thumb-height-md)!important
  }
}

@media (max-width:576px){
  .archive .post-thumbnail-container,.category .post-thumbnail-container{
    height:var(--thumb-height-sm)!important
  }
}

@media (max-width:480px){
  .archive .post-thumbnail-container,.category .post-thumbnail-container{
    height:var(--thumb-height-xs)!important
  }
}

@keyframes fadeIn{
  from{
    opacity:0
  }
  to{
    opacity:1
  }
}

.fade-in{
  animation:fadeIn var(--transition-slow) forwards
}

.skip-link{
  position:absolute;
  top:-40px;
  left:0;
  background:var(--cream);
  color:var(--deep-purple);
  padding:var(--space-xs) var(--space-sm);
  z-index:999;
  transition:transform var(--transition-fast)
}

.skip-link:focus{
  transform:translateY(40px)
}

.screen-reader-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.lazy-load{
  opacity:0;
  transition:opacity var(--transition-medium)
}

.lazy-loaded{
  opacity:1
}