body { font-family: 'Noto Sans', sans-serif !important; }
.font-display { font-family: 'Oswald', sans-serif; }
.font-serif { font-family: 'Playfair Display', serif; }

.bg-grid-pattern {
    background-image: 
        linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}
.font-outline-2 {
    -webkit-text-stroke: 2px #333;
    color: transparent;
}
html { scroll-behavior: smooth; }

/* Scrolled Header State */
header.scrolled {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
header.scrolled .logo-container { display: flex; }

/* Accordion Animation Logic */
.accordion-content { 
    transition: all 0.3s ease-in-out; 
    max-height: 0; 
    opacity: 0; 
    overflow: hidden; 
}
.accordion-content.open { 
    max-height: 500px; 
    opacity: 1; 
}
.rotate-icon {
    transition: transform 0.3s ease;
}
.rotate-icon.active {
    transform: rotate(180deg);
}

/* Custom Input Styling */
.contact-input {
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    border-width: 2px;
    border-color: #e5e7eb; /* gray-200 */
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.contact-input:focus {
    border-color: #FF5722;
}
      
/* Typography for article body */
.article-content p { margin-bottom: 1.5rem; line-height: 1.8; font-size: 1.125rem; color: #374151; }
.article-content h3 { font-family: 'Oswald', sans-serif; font-size: 1.5rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 1rem; }
.article-content blockquote p { border-left: 4px solid #FF5722; padding-left: 1.5rem; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.25rem; color: #111; margin: 2rem 0; }

#project-grid .group {
    height: 100%;
}

.filter-btn.active {
    background-color: #FF5722;
    color: white;
    border-color: #FF5722;
}

.border-lg {
    border-width: 5px;
}