:root {
    --background: 30 15% 97%;
    --foreground: 340 25% 20%;
    --card: 0 0% 100%;
    --primary: 345 45% 55%;
    --primary-light: 345 55% 85%;
    --primary-dark: 345 50% 45%;
    --secondary: 280 30% 75%;
    --accent: 30 35% 88%;
    --muted: 30 20% 94%;
    --muted-foreground: 340 15% 45%;
    --border: 30 15% 88%;
    --font-display: 'Fraunces', serif;
    --font-body: 'Manrope', sans-serif;
    --shadow-md: 0 4px 16px hsl(345 45% 55% / 0.12);
    --shadow-lg: 0 8px 32px hsl(345 45% 55% / 0.15);
    --shadow-glow: 0 0 40px hsl(345 55% 75% / 0.4), 0 8px 32px hsl(345 45% 55% / 0.2);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
}

.shadow-elegant {
    box-shadow: var(--shadow-md);
}

.shadow-glow {
    box-shadow: 0 0 24px hsl(345 55% 75% / 0.3);
}

.hover-glow {
    transition: transform .3s ease, box-shadow .3s ease;
}

.hover-glow:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-glow);
}

.hover-lift {
    transition: transform .3s ease, box-shadow .3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px) rotate(-1deg);
    box-shadow: var(--shadow-lg);
}

.hover-lift-subtle {
    transition: transform .3s ease, box-shadow .3s ease;
}

.hover-lift-subtle:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.noise-bg {
    position: relative;
}

.noise-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
}

.text-gradient-animated {
    background: linear-gradient(90deg, hsl(345 45% 55%), hsl(280 30% 70%), hsl(345 45% 55%));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
}

.floating {
    animation: floating 3s ease-in-out infinite;
}

.line-clamp-2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.article-prose {
    color: hsl(var(--foreground));
}

.article-prose p {
    margin: 0 0 1.6rem;
    font-size: 1.1rem;
    line-height: 1.9;
    color: hsl(var(--foreground));
}

.article-prose h2 {
    margin: 3rem 0 1.2rem;
    font-size: 2.2rem;
    line-height: 1.15;
    font-family: var(--font-display);
}

.article-prose h3 {
    margin: 2.2rem 0 1rem;
    font-size: 1.6rem;
    line-height: 1.25;
    font-family: var(--font-display);
}

.article-prose ul,
.article-prose ol {
    margin: 0 0 1.8rem;
    padding-left: 1.5rem;
    color: hsl(var(--foreground));
}

.article-prose ul {
    list-style: disc;
}

.article-prose ol {
    list-style: decimal;
}

.article-prose li {
    margin-bottom: 0.75rem;
    padding-left: 0.35rem;
    font-size: 1.08rem;
    line-height: 1.85;
}

.article-prose li::marker {
    color: hsl(var(--primary));
    font-weight: 700;
}

.article-prose strong {
    color: hsl(var(--foreground));
    font-weight: 800;
}

.article-prose a {
    color: hsl(var(--primary-dark));
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.article-prose a:hover {
    color: hsl(var(--primary));
}

.article-prose img {
    margin: 2rem auto;
    border-radius: 1.5rem;
    box-shadow: var(--shadow-md);
}

.article-prose blockquote {
    margin: 3rem 0;
    border-left: 4px solid hsl(var(--primary));
    border-radius: 0 1.5rem 1.5rem 0;
    background: linear-gradient(90deg, hsl(345 55% 92% / .5), hsl(280 35% 92% / .5));
    padding: 2rem;
    font-size: 1.3rem;
    font-style: italic;
}

input,
textarea,
button {
    font: inherit;
}

button {
    cursor: pointer;
}

::selection {
    background: hsl(var(--primary) / .18);
}

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

::-webkit-scrollbar-track {
    background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--primary));
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary-dark));
}

@keyframes floating {
    0%,
    100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes gradient-shift {
    0%,
    100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

@media (max-width: 767px) {
    .article-prose h2 {
        font-size: 1.8rem;
    }

    .article-prose h3 {
        font-size: 1.35rem;
    }

    .article-prose p {
        font-size: 1rem;
    }

    .article-prose li {
        font-size: 1rem;
    }
}