:root {
            --gh-ink: #1f1a1c;
            --gh-accent: #9b4a5f;
            --gh-accent-dark: #7d3a4c;
            --gh-muted: #6b6064;
            --gh-bg: #fffdfb;
            --gh-surface: #f8efeb;
            --gh-line: #e9dcd6;
            --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
            --bs-body-bg: var(--gh-bg);
            --bs-body-color: var(--gh-ink);
            --bs-link-color: var(--gh-accent-dark);
            --bs-link-hover-color: var(--gh-ink);
            --bs-border-color: var(--gh-line);
            --bs-secondary-color: var(--gh-muted);
            --bs-border-radius: 4px;
            --gh-section: clamp(3.5rem, 8vw, 7rem);
        }

        h1,
        h2,
        h3,
        .h3,
        .logo {
            font-family: 'Playfair Display', Georgia, serif;
            font-weight: 500;
            letter-spacing: -.01em;
            line-height: 1.15
        }

        h2 {
            font-size: clamp(1.75rem, 3.6vw, 2.75rem)
        }

        h3,
        .h3 {
            font-size: clamp(1.15rem, 2vw, 1.45rem)
        }

        a {
            text-underline-offset: 3px
        }

        .section {
            padding-block: var(--gh-section)
        }

        .bg-surface {
            background: var(--gh-surface)
        }

        .text-muted-gh {
            color: var(--gh-muted)
        }

        .eyebrow {
            font-size: .85rem;
            font-weight: 600;
            color: var(--gh-accent-dark);
            margin-bottom: .35rem
        }

        .meta {
            font-size: .85rem;
            color: var(--gh-muted)
        }

        .logo {
            font-size: 1.4rem;
            letter-spacing: .2em;
            font-weight: 600;
            color: var(--gh-ink);
            text-decoration: none
        }

        .logo span {
            color: var(--gh-accent)
        }

        .navbar {
            background: rgba(255, 253, 251, .95);
            backdrop-filter: blur(8px);
            border-bottom: 1px solid var(--gh-line)
        }

        .navbar .nav-link {
            color: var(--gh-ink);
            font-weight: 500;
            border-bottom: 1px solid transparent;
            padding-inline: .25rem;
            margin-inline: .6rem
        }

        .navbar .nav-link:hover,
        .navbar .nav-link.active {
            color: var(--gh-accent-dark);
            border-color: var(--gh-accent)
        }

        .btn-ink {
            --bs-btn-bg: var(--gh-ink);
            --bs-btn-border-color: var(--gh-ink);
            --bs-btn-color: #fff;
            --bs-btn-hover-bg: var(--gh-accent-dark);
            --bs-btn-hover-border-color: var(--gh-accent-dark);
            --bs-btn-hover-color: #fff;
            --bs-btn-active-bg: var(--gh-accent-dark);
            --bs-btn-active-border-color: var(--gh-accent-dark);
            --bs-btn-active-color: #fff;
            --bs-btn-focus-shadow-rgb: 155, 74, 95;
            font-weight: 600
        }

        .link-cta {
            font-weight: 600;
            color: var(--gh-accent-dark);
            border-bottom: 1px solid var(--gh-accent);
            text-decoration: none;
            padding-bottom: 2px
        }

        .form-control:focus {
            border-color: var(--gh-accent);
            box-shadow: 0 0 0 .25rem rgba(155, 74, 95, .2)
        }

        /* Image placeholders: replace each with <img class="ph-img" width height loading="lazy" alt> */
        .ph {
            background: linear-gradient(135deg, #f3e3dd, #e6cbc4);
            border-radius: var(--bs-border-radius);
            width: 100%
        }

        .ph.t2 {
            background: linear-gradient(135deg, #efe1d8, #dcc3b5)
        }

        .ph.t3 {
            background: linear-gradient(135deg, #f0dde2, #dcb9c4)
        }

        .ph.t4 {
            background: linear-gradient(135deg, #e9e2dc, #d3c7be)
        }

        .ph-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--bs-border-radius)
        }

        .r43 {
            aspect-ratio: 4/3
        }

        .r45 {
            aspect-ratio: 4/5
        }

        .r34 {
            aspect-ratio: 3/4
        }

        .r11 {
            aspect-ratio: 1/1
        }

        .r32 {
            aspect-ratio: 3/2
        }

        .r169 {
            aspect-ratio: 16/10
        }

        .r35 {
            aspect-ratio: 3/5
        }

        .hero {
            padding-block: clamp(2.5rem, 6vw, 5rem) var(--gh-section)
        }

        .hero h1 {
            font-size: clamp(2.4rem, 5.4vw, 4.6rem);
            margin-bottom: 1.25rem
        }

        .hero .lead {
            max-width: 34rem;
            color: var(--gh-muted)
        }

        .search-group {
            max-width: 35rem
        }

        .topic a,
        .story a,
        .list-story a {
            color: inherit;
            text-decoration: none
        }

        .topic:hover h3,
        .story:hover h3,
        .list-story:hover h3 {
            color: var(--gh-accent-dark)
        }

        .lead-story h3 {
            font-size: clamp(1.6rem, 3vw, 2.4rem)
        }

        .list-story {
            border-top: 1px solid var(--gh-line);
            padding-block: 1.25rem
        }

        .list-story:first-child {
            border-top: 0;
            padding-top: 0
        }

        .hair-intro {
            top: 6.5rem
        }

        .chip {
            display: inline-block;
            font-size: .85rem;
            padding: .35rem .85rem;
            border: 1px solid var(--gh-ink);
            border-radius: 99px;
            color: var(--gh-ink);
            text-decoration: none
        }

        .chip:hover {
            background: var(--gh-ink);
            color: #fff
        }

        .scroller {
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding-bottom: 1rem
        }

        .scroller>article {
            flex: 0 0 min(17rem, 78%);
            scroll-snap-align: start
        }

        .treat-cap {
            position: relative;
            background: var(--gh-bg);
            margin: -4rem 0 0 1.5rem;
            padding: 1.5rem 1.75rem;
            max-width: 34rem;
            border-top: 3px solid var(--gh-accent)
        }

        .treat-list a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.25rem;
            color: var(--gh-ink);
            text-decoration: none;
            padding-block: .8rem;
            border-bottom: 1px solid var(--gh-line)
        }

        .treat-list a:hover {
            color: var(--gh-accent-dark)
        }

        .treat-list small {
            font: 400 .8rem 'Inter', sans-serif;
            color: var(--gh-muted)
        }

        .note {
            background: var(--gh-surface);
            border-left: 3px solid var(--gh-accent);
            padding: 1rem 1.15rem;
            font-size: .9rem;
            color: var(--gh-muted)
        }

        .device {
            background: #fff;
            border: 1px solid var(--gh-line);
            transition: border-color .2s
        }

        .device:hover {
            border-color: var(--gh-accent)
        }

        .principle {
            border-top: 1px solid var(--gh-ink);
            padding-top: 1rem
        }

        .principle .h3 {
            margin-bottom: .35rem
        }

        .feed-item {
            display: flex;
            gap: 1.25rem;
            padding-block: 1.5rem;
            border-bottom: 1px solid var(--gh-line);
            color: inherit;
            text-decoration: none
        }

        .feed-item .ph {
            flex: 0 0 7.5rem;
            align-self: flex-start
        }

        .feed-item:hover h3 {
            color: var(--gh-accent-dark)
        }

        footer {
            border-top: 1px solid var(--gh-line)
        }

        footer .foot-h {
            font-size: .9rem;
            font-weight: 600;
            color: var(--gh-muted);
            margin-bottom: .9rem
        }

        footer a {
            color: var(--gh-ink);
            text-decoration: none
        }

        footer a:hover {
            color: var(--gh-accent-dark);
            text-decoration: underline
        }

        @media (max-width:991.98px) {
            .hair-intro {
                position: static !important
            }

            .treat-cap {
                margin: -3rem 1rem 0
            }
        }

        @media (prefers-reduced-motion:reduce) {
            * {
                transition: none !important;
                scroll-behavior: auto !important
            }
        }
/* ==================================================
   Site Logo
================================================== */

.site-logo {
    display: flex;
    align-items: center;
}

.site-logo .custom-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo .custom-logo {
    display: block;
    width: auto;
    height: 42px;
    max-width: 180px;
    object-fit: contain;
}


/* Fallback Text Logo */

.site-logo .logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    letter-spacing: .2em;
    font-weight: 600;
    color: var(--gh-ink);
    text-decoration: none;
}

.site-logo .logo span {
    color: var(--gh-accent);
}


/* Mobile */

@media (max-width: 767.98px) {

    .site-logo .custom-logo {
        height: 36px;
        max-width: 160px;
    }

}
/* ==================================================
   Footer
================================================== */

.site-footer {
	padding: 80px 0 30px;
	background: var(--gh-ink);
	color: rgba(255, 255, 255, 0.72);
}

.footer-brand {
	margin-bottom: 24px;
}

.footer-logo .custom-logo {
	display: block;
	width: auto;
	height: 42px;
	max-width: 180px;
	object-fit: contain;
}

.footer-text-logo {
	display: inline-block;
	color: #fff;
}

.footer-text-logo:hover {
	color: #fff;
}

.footer-description {
	max-width: 360px;
	margin-bottom: 16px;
	line-height: 1.8;
}

.footer-tagline {
	margin: 0;
	font-family: var(--font-heading);
	font-style: italic;
	color: rgba(255, 255, 255, 0.5);
}

.footer-heading {
	margin-bottom: 20px;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

.footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu li {
	margin-bottom: 10px;
}

.footer-menu a {
	color: rgba(255, 255, 255, 0.68);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-menu a:hover {
	color: #fff;
}

.footer-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;

	margin-top: 60px;
	padding-top: 24px;

	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-copyright,
.footer-disclaimer {
	margin: 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.45);
}

.footer-disclaimer {
	max-width: 520px;
	text-align: right;
}


/* Mobile */

@media (max-width: 767.98px) {

	.site-footer {
		padding: 60px 0 24px;
	}

	.footer-bottom {
		display: block;
		margin-top: 40px;
	}

	.footer-disclaimer {
		margin-top: 12px;
		text-align: left;
	}

}