:root {
    /* ===== Brand Core (ink + watercolor) ===== */
    /* Ink for brush logotype & high-contrast text */
    --mh-ink: #111316;
    --mh-ink-2: #171a1d;
    /* Watercolor petals from the logo (soft, award-friendly tones) */
    --mh-sakura: #f4a7bf; /* pink petal */
    --mh-plumeria: #f4d06f; /* warm yellow */
    --mh-coral: #e95f5c; /* matches existing coral */
    --mh-teal: #0f7c82; /* ocean/leaf teal (kept) */
    --mh-forest: #187a6e; /* deep green for accents */
    --mh-sunset: #e4572e; /* warm accent (kept) */
    --mh-beige: #f3e4c7; /* washi/beige paper */
    --mh-sand: #d4b692; /* sandy neutral */
    --mh-navy: #223347; /* deep UI ink */
    /* Focus ring tuned for JP preference (soft teal) */
    --mh-ring: color-mix(in oklab, var(--mh-teal) 55%, white);
    /* ===== Bootstrap variable mapping ===== */
    --bs-primary: var(--mh-teal);
    --bs-secondary: var(--mh-sand);
    --bs-success: #2e9b74;
    --bs-info: #2ca6c9;
    --bs-warning: var(--mh-sunset);
    --bs-danger: #c84646;
    --bs-body-font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-sans-serif: var(--bs-body-font-family);
    --bs-body-color: var(--mh-ink);
    --bs-link-color: var(--mh-teal);
    --bs-link-hover-color: color-mix(in oklab, var(--mh-teal), black 15%);
    /* Softer, rounder radii to echo hibiscus & handwriting */
    --bs-border-radius: 1rem;
    --bs-border-radius-lg: 1.25rem;
    --bs-border-radius-xl: 1.75rem;
    /* Brand sizing */
    --brand-h: 38px; /* default logo height */
    --brand-h-lg: 48px; /* on wide screens */

    --ink-60: color-mix(in oklab, var(--mh-ink) 60%, white);
    --ink-40: color-mix(in oklab, var(--mh-ink) 40%, white);
    --wash-bd: color-mix(in oklab, var(--mh-teal) 10%, transparent);
    --chip-bd: color-mix(in oklab, var(--mh-teal) 20%, white);
    --chip-bg: color-mix(in oklab, var(--mh-teal) 12%, white);
    --mh-ink-70: color-mix(in oklab, var(--mh-ink) 70%, white);
    --mh-ink-50: color-mix(in oklab, var(--mh-ink) 50%, white);
    --mh-ink-35: color-mix(in oklab, var(--mh-ink) 35%, white);
    --mh-ink-soft: color-mix(in oklab, var(--mh-ink) 70%, white);
    --mh-teal-soft: color-mix(in oklab, var(--mh-teal) 14%, white);
    --mh-teal-strong: color-mix(in oklab, var(--mh-teal) 80%, white);
    --mh-sakura-soft: color-mix(in oklab, var(--mh-sakura) 24%, white);
    --mh-beige-soft: color-mix(in oklab, var(--mh-beige) 70%, white);
}

/* ===== Headings (Zen Maru Gothic) ===== */
h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4 {
    font-family: "Zen Maru Gothic", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.01em; /* subtle, JP-friendly */
}

.fw-900 {
    font-weight: 900;
}

/* ===== Navbar & Brand Lockup ===== */
.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    line-height: 1;
}

    .navbar-brand img,
    .navbar-brand svg {
        height: var(--brand-h);
        width: auto;
    }

    .navbar-brand .brand-wordmark {
        font-family: "Zen Maru Gothic", "Noto Sans JP", system-ui;
        font-weight: 900;
        color: var(--mh-ink);
        letter-spacing: 0.01em;
    }

    .navbar-brand .brand-ja {
        display: block;
        font-family: "Noto Sans JP", system-ui;
        font-weight: 700;
        font-size: 0.78rem;
        color: color-mix(in oklab, var(--mh-ink) 80%, var(--mh-navy));
        opacity: 0.9;
        margin-top: -2px; /* tuck under baseline like in the mark */
    }

/* Nav links: firmer contrast beside black logotype */
.navbar .nav-link {
    font-weight: 600;
    color: color-mix(in oklab, var(--mh-navy) 90%, var(--mh-ink));
}

    .navbar .nav-link:hover,
    .navbar .nav-link:focus {
        color: color-mix(in oklab, var(--mh-teal), var(--mh-navy) 25%);
    }

/* ===== Buttons (rounded, crisp focus) ===== */
.btn {
    --bs-btn-border-radius: 0.875rem;
}

.btn-primary {
    --bs-btn-bg: var(--mh-teal);
    --bs-btn-border-color: var(--mh-teal);
    --bs-btn-hover-bg: color-mix(in oklab, var(--mh-teal), black 10%);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--mh-teal), black 10%);
    --bs-btn-active-bg: color-mix(in oklab, var(--mh-teal), black 18%);
}

.btn-outline-primary {
    --bs-btn-color: var(--mh-teal);
    --bs-btn-border-color: var(--mh-teal);
    --bs-btn-hover-bg: var(--mh-teal);
    --bs-btn-hover-border-color: var(--mh-teal);
    --bs-btn-active-bg: color-mix(in oklab, var(--mh-teal), black 12%);
}

.btn-soft-primary {
    --bs-btn-color: var(--mh-teal);
    --bs-btn-bg: color-mix(in oklab, var(--mh-teal) 12%, white);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: color-mix(in oklab, var(--mh-teal) 18%, white);
    --bs-btn-active-bg: color-mix(in oklab, var(--mh-teal) 26%, white);
}

.btn:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--mh-ring);
}

/* ===== Cards ===== */
.card {
    border: 1px solid color-mix(in oklab, var(--mh-teal) 8%, #0000);
    border-radius: 1rem;
    background-clip: padding-box;
}

.card-lift {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}

    .card-lift:hover {
        transform: translateY(-4px);
        box-shadow: 0 1.25rem 2.5rem -1rem rgba(0, 0, 0, 0.15);
    }

/* ===== Background Washes (watercolor echo) ===== */
.bg-wash,
.bg-body-tertiary {
    --bs-bg-opacity: 1;
}

.bg-wash {
    background: radial-gradient(1100px 420px at -10% -10%, color-mix(in oklab, var(--mh-sakura) 22%, white) 0%, transparent 60%), radial-gradient(900px 340px at 110% 10%, color-mix(in oklab, var(--mh-teal) 20%, white) 0%, transparent 60%), linear-gradient(180deg, #fff, color-mix(in oklab, var(--mh-beige) 62%, white));
}

.bg-sakura {
    background: var(--mh-sakura);
}

.bg-teal {
    background: var(--mh-teal);
}

.bg-coral {
    background: var(--mh-coral);
}

.bg-forest {
    background: var(--mh-forest);
}

.bg-sand {
    background: var(--mh-sand);
}

.bg-navy {
    background: var(--mh-navy);
}

/* ===== Badges ===== */
.text-bg-primary-subtle {
    color: var(--mh-teal);
    background-color: color-mix(in oklab, var(--mh-teal) 12%, white) !important;
    border: 1px solid color-mix(in oklab, var(--mh-teal) 20%, white);
}

/* ===== Utilities ===== */
.object-fit-cover {
    object-fit: cover;
}

/* ===== Brand Utilities (optional, handy) ===== */
.brand-ink {
    color: var(--mh-ink) !important;
}

.brand-ink-weak {
    color: color-mix(in oklab, var(--mh-ink) 75%, var(--mh-navy)) !important;
}

.brand-petal {
    color: var(--mh-sakura) !important;
}

.brand-forest {
    color: var(--mh-forest) !important;
}

/* ===== Fullscreen Menu (kept from prior work; ensures harmony with logo) ===== */
.fs-menu-list .fs-entry {
    text-decoration: none;
    color: var(--mh-ink);
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--mh-teal) 10%, transparent);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s, box-shadow 0.2s;
}

    .fs-menu-list .fs-entry:hover {
        transform: translateY(-2px);
        border-color: color-mix(in oklab, var(--mh-teal) 22%, transparent);
        box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, 0.12);
    }

    .fs-menu-list .fs-entry:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.25rem var(--mh-ring);
    }

/* Watercolor icon tile behind menu glyphs */
.wc-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
}

    .wc-icon::before {
        content: "";
        position: absolute;
        inset: -10% -10%;
        background: radial-gradient(60% 60% at 30% 20%, color-mix(in oklab, var(--mh-coral) 18%, transparent) 0%, transparent 65%), radial-gradient(60% 60% at 70% 80%, color-mix(in oklab, var(--mh-teal) 18%, transparent) 0%, transparent 65%), radial-gradient(80% 80% at 40% 60%, color-mix(in oklab, var(--mh-plumeria) 65%, white) 0%, transparent 85%);
        filter: saturate(110%);
        opacity: 0.9;
        z-index: -1;
    }

    .wc-icon img {
        width: 44px;
        height: 44px;
        object-fit: contain;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
    }

/* ===== Search pill in FS menu (harmonized with new ink) ===== */
.fs-search-input {
    color: var(--mh-ink);
    border-color: rgba(0, 0, 0, 0.12);
}

.fs-search-ico {
    color: rgba(0, 0, 0, 0.55);
}

.fs-search-btn {
    background: var(--mh-ink-2);
}

    .fs-search-btn:hover {
        background: color-mix(in oklab, var(--mh-ink-2) 85%, var(--mh-teal));
    }

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .card-lift,
    .fs-menu-list .fs-entry {
        transition: none;
    }
}

.store-link {
    -ms-word-break: inherit;
    word-break: inherit;
}