/* Shared Global Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; line-height: 1.9; color: #4a3826; background: #f4e7d3; }
header { background: rgba(255,255,255,0.95); padding: 1rem 0; box-shadow: 0 2px 20px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(125,95,65,0.12); }
nav { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
nav h1 { font-size: 1.7rem; color: #5a4332; font-family: 'Playfair Display', serif; }
nav ul { list-style: none; display: flex; gap: 1.8rem; }
nav a { color: #5a4332; text-decoration: none; font-weight: 500; transition: color 0.2s; }
nav a:hover { color: #b48b6b; }
.footer { background: #d5b897; color: #3f2d20; text-align: center; padding: 3rem 2rem; }
.back-link { display: inline-block; margin-top: 2rem; color: #b48b6b; text-decoration: none; font-weight: 600; }

/* Shared Hero styles */
.hero { background: linear-gradient(135deg, #e7d3b4 0%, #f7eedb 100%); padding: 6rem 2rem 4rem; text-align: center; }
.hero-image { width: 300px; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); margin-bottom: 1rem; }
.hero h2 { font-size: 3rem; margin-bottom: 1rem; font-family: 'Playfair Display', serif; }

.content figure {
    margin: 2rem auto;
    max-width: 900px;
}

.content figure img {
    width: 100%;
    display: block;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.09);
}

.content figure figcaption {
    margin-top: 0.8rem;
    color: #7b5d44;
    font-size: 0.95rem;
    text-align: center;
}

/* Heart/Like Button Styles */
.like-btn, .heart-btn { cursor: pointer; transition: transform 0.2s; }
.liked { color: #c0392b; }
@keyframes pop { 
    0%, 100% { transform: scale(1); } 
    50% { transform: scale(1.35); } 
}

/* Additional subtle special effects */
.article-card { border-radius: 14px; overflow: hidden; position: relative; transition: transform 0.35s cubic-bezier(.2,.9,.2,1), box-shadow 0.35s, border-color 0.35s; }
.article-card:hover { transform: translateY(-10px) scale(1.01); box-shadow: 0 30px 60px rgba(74,56,38,0.12); }
.article-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06)); mix-blend-mode: overlay; opacity: 0; transition: opacity 0.4s; }
.article-card:hover::before { opacity: 1; }
.card-image { transition: transform 0.6s ease, filter 0.45s ease; }
.article-card:hover .card-image { transform: scale(1.06) rotate(-0.4deg); filter: saturate(1.05) contrast(1.02); }

/* Subtle button shine */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ''; position: absolute; top: -60%; left: -30%; width: 40%; height: 220%; background: linear-gradient(120deg, rgba(255,255,255,0.06), rgba(255,255,255,0.22), rgba(255,255,255,0.06)); transform: rotate(20deg); transition: transform 0.9s ease; opacity: 0.9; }
.btn:hover::after { transform: translateX(260%); }

/* Animated link underline */
a { position: relative; }
a::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; background: linear-gradient(90deg,#b48b6b,#c8973a); transition: width 0.35s ease; }
a:hover::after { width: 100%; }

/* Focus-visible accessibility */
:focus-visible { outline: 3px solid rgba(180,139,107,0.18); outline-offset: 3px; }

/* defensive rule removed to restore article display */

/* New animations: entrance, floating hero image, tilt on hover, staggered reveal */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(16px) scale(0.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes floatY {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

@keyframes tiltShine {
    0% { transform: rotateZ(-2deg) translateX(-2%); }
    50% { transform: rotateZ(2deg) translateX(2%); }
    100% { transform: rotateZ(-2deg) translateX(-2%); }
}

/* Apply entrance animation and stagger for lists */
.articles .article-card,
.articles-grid .article-card {
    opacity: 0;
    transform-origin: center bottom;
    animation: cardIn 640ms cubic-bezier(.2,.9,.2,1) forwards;
}
.articles .article-card:nth-child(1), .articles-grid .article-card:nth-child(1) { animation-delay: 0.06s; }
.articles .article-card:nth-child(2), .articles-grid .article-card:nth-child(2) { animation-delay: 0.14s; }
.articles .article-card:nth-child(3), .articles-grid .article-card:nth-child(3) { animation-delay: 0.22s; }
.articles .article-card:nth-child(4), .articles-grid .article-card:nth-child(4) { animation-delay: 0.30s; }
.articles .article-card:nth-child(5), .articles-grid .article-card:nth-child(5) { animation-delay: 0.38s; }
.articles .article-card:nth-child(6), .articles-grid .article-card:nth-child(6) { animation-delay: 0.46s; }

/* smoother hover with subtle 3D tilt */
.article-card {
    transition: transform 0.45s cubic-bezier(.2,.9,.2,1), box-shadow 0.45s;
    will-change: transform;
}
.article-card:hover {
    transform: translateY(-14px) scale(1.02) rotateX(1deg);
    box-shadow: 0 36px 80px rgba(74,56,38,0.14);
}

/* floating hero image */
.hero-image { animation: floatY 6s ease-in-out infinite; }

/* Button micro-interaction: quick bounce on click */
.btn:active { transform: translateY(3px) scale(0.99); transition: transform 120ms; }

/* Subtle pulsing accent for important links/buttons */
.btn.pulse::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 rgba(180,139,107,0.12);
    animation: pulse 2.2s infinite;
    pointer-events: none;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 rgba(180,139,107,0.12); } 50% { box-shadow: 0 18px 40px rgba(180,139,107,0.06); } 100% { box-shadow: 0 0 0 rgba(180,139,107,0.0); } }

/* Decorative tilt on hero small devices to feel more dynamic */
@media (max-width: 768px) {
    .hero-image { transform-origin: center; animation: tiltShine 8s ease-in-out infinite; }
}