:root {
                --teal: #0D7C7C;
                --teal-light: #15A9A9;
                --teal-dark: #085F5F;
                --mint: #E6F7F7;
                --cream: #FAFCFC;
                --gold: #C8A96E;
                --dark: #0F2525;
                --text: #2A4545;
                --muted: #5A7A7A;
                --ease: cubic-bezier(0.4, 0, 0.2, 1);
            }

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

            html {
                scroll-behavior: smooth
            }

            body {
                font-family: "DM Sans", sans-serif;
                background: var(--cream);
                color: var(--text)
            }

            /* NAV */
            nav {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 100;
                background: rgba(255, 255, 255, 0.97);
                backdrop-filter: blur(20px);
                border-bottom: 1px solid rgba(13, 124, 124, 0.08);
                transition: box-shadow .3s;
            }

            nav.scrolled {
                box-shadow: 0 4px 24px rgba(13, 124, 124, 0.1)
            }

            .nav-inner {
                /* max-width: 860px;
                margin: 0 auto;
                padding: 0 24px;
                height: 64px;
                display: flex;
                align-items: center;
                justify-content: space-between; */
            }

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

            .logo-mark {
                width: 36px;
                height: 36px;
                background: linear-gradient(135deg, var(--teal), var(--teal-light));
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                font-weight: 900;
                color: #fff
            }

            .logo-name {
                font-family: "Playfair Display", serif;
                font-size: 19px;
                font-weight: 700;
                color: var(--teal-dark)
            }

            .back-btn {
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 7px 14px;
                border-radius: 9px;
                background: var(--mint);
                color: var(--teal);
                font-size: 13.5px;
                font-weight: 500;
                text-decoration: none;
                transition: all .2s;
                border: 1px solid rgba(13, 124, 124, 0.12);
            }

            .back-btn:hover {
                background: var(--teal);
                color: #fff
            }

            /* ARTICLE */
            .article {
                max-width: 991px;
                margin: 0 auto;
                padding: 150px 24px 80px
            }

            /* Category + date row */
            .article-top {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-bottom: 20px;
                opacity: 0;
                transform: translateY(14px);
                animation: up .6s var(--ease) .05s forwards;
            }

            .cat-badge {
                background: var(--teal);
                color: #fff;
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: .6px;
                text-transform: uppercase;
            }

            .article-date {
                font-size: 13px;
                color: var(--muted)
            }

            /* Title */
            .article-title {
                font-family: "Playfair Display", serif;
                font-size: clamp(28px, 5vw, 17px);
                font-weight: 700;
                line-height: 1.15;
                color: var(--dark);
                letter-spacing: -.4px;
                margin-bottom: 32px;
                opacity: 0;
                transform: translateY(16px);
                animation: up .65s var(--ease) .12s forwards;
            }

            /* Main image */
            .article-img {
                width: 100%;
                aspect-ratio: 16/9;
                border-radius: 18px;
                overflow: hidden;
                margin-bottom: 36px;
                box-shadow: 0 12px 48px rgba(13, 124, 124, 0.14);
                opacity: 0;
                transform: translateY(16px);
                animation: up .7s var(--ease) .2s forwards;
            }

            .article-img img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block
            }

            /* Description text */
            .article-desc {
                font-size: 16.5px;
                line-height: 1.85;
                color: var(--text);
                opacity: 0;
                transform: translateY(14px);
                animation: up .65s var(--ease) .3s forwards;
            }

            .article-desc p {
                margin-bottom: 22px
            }

            .article-desc p:last-child {
                margin-bottom: 0
            }

            @keyframes up {
                to {
                    opacity: 1;
                    transform: translateY(0)
                }
            }

            ::-webkit-scrollbar {
                width: 5px
            }

            ::-webkit-scrollbar-track {
                background: var(--cream)
            }

            ::-webkit-scrollbar-thumb {
                background: var(--teal);
                border-radius: 3px
            }