:root {
    --phe-paper: #fbfaf6;
    --phe-surface: #ffffff;
    --phe-surface-warm: #f4efe6;
    --phe-ink: #24211d;
    --phe-muted: #6d6258;
    --phe-line: rgba(36, 33, 29, 0.12);
    --phe-green: #486a43;
    --phe-green-dark: #263f2b;
    --phe-coral: #b95f3d;
    --phe-blue: #456b7b;
    --phe-shadow: 0 18px 45px rgba(36, 33, 29, 0.10);
    --phe-radius: 8px;
}

html {
    background: var(--phe-paper);
}

body {
    background:
        linear-gradient(90deg, rgba(72, 106, 67, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(185, 95, 61, 0.04), rgba(69, 107, 123, 0.035) 42%, transparent 74%),
        var(--phe-paper) !important;
    background-size: 44px 44px, 100% 100%, auto !important;
    color: var(--phe-ink) !important;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--phe-coral) !important;
    color: #fff !important;
}

.text-earth,
.text-earth-light,
.text-cream,
h1,
h2,
h3,
h4 {
    color: var(--phe-ink) !important;
}

.text-earth-light,
p,
li {
    color: var(--phe-muted) !important;
}

.text-matcha,
.hover\:text-matcha:hover,
.hover\:text-matcha-light:hover {
    color: var(--phe-green) !important;
}

.bg-matcha {
    background: var(--phe-green) !important;
}

.bg-earth {
    background: #17281d !important;
}

.bg-cream,
.bg-white {
    background: var(--phe-surface) !important;
}

.border-earth\/10,
.border-earth\/15,
.border {
    border-color: var(--phe-line) !important;
}

.font-serif,
h1,
h2,
h3 {
    letter-spacing: 0 !important;
}

h1 {
    max-width: 12ch;
    color: var(--phe-ink) !important;
}

h1 + p,
h2 + p {
    max-width: 68ch;
}

nav {
    background: rgba(251, 250, 246, 0.88) !important;
    border-bottom: 1px solid var(--phe-line);
    box-shadow: 0 14px 38px rgba(36, 33, 29, 0.08) !important;
    min-height: 76px;
}

#navbar.scrolled,
.glass-nav {
    background: rgba(251, 250, 246, 0.94) !important;
    border-bottom: 1px solid var(--phe-line);
}

nav a:first-child {
    color: var(--phe-green-dark) !important;
    font-weight: 700 !important;
}

nav .hidden a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.45rem 0.95rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--phe-ink) !important;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.06em !important;
    line-height: 1;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

nav .hidden a::after {
    content: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.45rem;
    height: 2px;
    background: var(--phe-coral);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
}

nav .hidden a:hover::after,
nav .hidden a:focus-visible::after {
    transform: scaleX(1);
}

nav .hidden a:hover,
nav .hidden a:focus-visible {
    background: rgba(72, 106, 67, 0.10);
    border-color: rgba(72, 106, 67, 0.18);
    color: var(--phe-green-dark) !important;
    transform: translateY(-1px);
}

#mobile-menu {
    background:
        linear-gradient(180deg, rgba(72, 106, 67, 0.09), rgba(185, 95, 61, 0.08)),
        var(--phe-paper) !important;
    visibility: hidden;
}

body.menu-open #mobile-menu {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible;
}

#mobile-menu-btn,
#close-menu-btn,
.hero-glass-button,
a.bg-matcha,
button[type="submit"] {
    min-height: 44px;
    border-radius: 999px !important;
    border: 1px solid rgba(72, 106, 67, 0.35) !important;
    box-shadow: 0 10px 22px rgba(36, 33, 29, 0.10);
}

#mobile-menu-btn {
    background: var(--phe-green-dark) !important;
    color: #fff !important;
}

#close-menu-btn {
    background: #fff !important;
    color: var(--phe-ink) !important;
}

a.bg-matcha,
button[type="submit"] {
    background: var(--phe-green-dark) !important;
    color: #fff !important;
}

a.bg-matcha:hover,
button[type="submit"]:hover {
    background: var(--phe-coral) !important;
}

.soft-card,
.menu-card,
.blog-card,
article.bg-white,
article,
.hero-glass {
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid var(--phe-line) !important;
    border-radius: var(--phe-radius) !important;
    box-shadow: var(--phe-shadow) !important;
}

.blog-card,
.menu-card,
.soft-card {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.blog-card:hover,
.menu-card:hover,
.soft-card:hover {
    border-color: rgba(185, 95, 61, 0.35) !important;
    box-shadow: 0 24px 52px rgba(36, 33, 29, 0.13) !important;
}

.rounded-2xl,
.rounded-xl,
.image-zoom-container,
iframe {
    border-radius: var(--phe-radius) !important;
}

.image-zoom-container,
article img,
main img {
    border: 1px solid rgba(36, 33, 29, 0.10);
    box-shadow: 0 16px 36px rgba(36, 33, 29, 0.12);
}

img {
    filter: saturate(1.04) contrast(1.02);
}

.hero-overlay {
    background: linear-gradient(90deg, rgba(11, 18, 14, 0.68), rgba(11, 18, 14, 0.28) 58%, rgba(11, 18, 14, 0.54)) !important;
}

.hero-copy-glass,
.hero-glass {
    background: rgba(251, 250, 246, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    color: #fff !important;
}

.relative.h-screen h1,
.relative.h-screen p,
.relative.h-screen a,
.relative.h-screen i,
.hero-copy-glass *,
.hero-glass * {
    color: #fff !important;
}

.bg-earth,
.bg-earth h1,
.bg-earth h2,
.bg-earth h3,
.bg-earth p,
.bg-earth a,
.bg-earth i,
.text-cream,
.text-cream\/70,
.text-cream\/50 {
    color: rgba(255, 255, 255, 0.82) !important;
}

.tracking-\[0\.28em\],
.tracking-\[0\.24em\],
.tracking-\[0\.22em\],
.tracking-widest {
    letter-spacing: 0.13em !important;
}

main > section:first-child,
main > article:first-child,
main.pt-32,
main.pt-36 {
    position: relative;
}

main > section:first-child::before {
    content: "";
    display: block;
    width: 88px;
    height: 4px;
    margin: 0 0 2rem;
    background: linear-gradient(90deg, var(--phe-green), var(--phe-coral), var(--phe-blue));
}

.text-center main > section:first-child::before,
section.text-center::before,
.text-center::before {
    margin-left: auto;
    margin-right: auto;
}

.copy,
.article-copy,
article {
    color: var(--phe-muted) !important;
}

.copy h2,
.article-copy h2,
article > h2 {
    color: var(--phe-green-dark) !important;
    border-top: 1px solid var(--phe-line);
    padding-top: 1.1rem;
}

.copy p,
.article-copy p,
article > p {
    color: var(--phe-muted) !important;
}

.related-articles a,
article .border.rounded-full,
main a.border {
    background: rgba(255, 255, 255, 0.65);
    color: var(--phe-ink) !important;
    border-color: rgba(72, 106, 67, 0.24) !important;
}

.related-articles a:hover,
main a.border:hover {
    background: rgba(185, 95, 61, 0.10) !important;
    border-color: rgba(185, 95, 61, 0.42) !important;
}

input,
textarea,
select {
    background: #fff !important;
    border: 1px solid var(--phe-line) !important;
    border-radius: var(--phe-radius) !important;
    color: var(--phe-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

input:focus,
textarea:focus,
select:focus,
a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(185, 95, 61, 0.28) !important;
    outline-offset: 3px;
}

.site-footer {
    background:
        radial-gradient(circle at top left, rgba(185, 95, 61, 0.22), transparent 34%),
        linear-gradient(135deg, rgba(72, 106, 67, 0.30), rgba(69, 107, 123, 0.18)),
        #17281d !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer,
.site-footer p,
.site-footer a,
.site-footer div,
.site-footer h2 {
    color: rgba(255, 255, 255, 0.78) !important;
}

.site-footer .footer-brand {
    color: #fff !important;
}

.site-footer .footer-heading {
    color: rgba(255, 255, 255, 0.92) !important;
}

.site-footer .footer-links a,
.site-footer .footer-map-link {
    width: fit-content;
    color: rgba(255, 255, 255, 0.76) !important;
    line-height: 1.35;
    transition: color 180ms ease, transform 180ms ease;
}

.site-footer .footer-links a:hover,
.site-footer .footer-map-link:hover {
    color: #fff !important;
    transform: translateX(3px);
}

.site-footer .footer-links a:first-child {
    color: rgba(255, 255, 255, 0.76) !important;
    font-weight: 500 !important;
}

.site-footer .footer-visit {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
}

.site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer .footer-bottom p {
    color: rgba(255, 255, 255, 0.58) !important;
}

@media (min-width: 768px) {
    main {
        overflow: clip;
    }

    .blog-card,
    .menu-card,
    .soft-card {
        min-height: 100%;
    }
}

@media (max-width: 767px) {
    body {
        background-size: 30px 30px, 100% 100%, auto !important;
    }

    nav {
        min-height: 64px !important;
    }

    h1 {
        max-width: 100%;
    }

    main {
        padding-top: 6.5rem !important;
    }

    .soft-card,
    .menu-card,
    .blog-card,
    article.bg-white,
    article {
        border-radius: var(--phe-radius) !important;
    }

    main > section:first-child::before {
        width: 64px;
        margin-bottom: 1.35rem;
    }

    .menu-card .space-y-5 > .flex.justify-between {
        flex-direction: column;
    }

    .menu-card .space-y-5 > .flex.justify-between span {
        width: fit-content;
    }
}