/* =====================================================================
   MTK — base.css (shared)
   Reset, layout container, base typography, buttons, and the shared footer.
   Consumes semantic tokens (--bg, --text, --font-*) with primitive
   fallbacks so it still renders sanely on pages without a theme class.
   ===================================================================== */

/* ---- Reset ------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body, var(--font-noto-jp));
    font-size: var(--size-body, 1rem);
    line-height: var(--leading);
    color: var(--text, var(--color-brown));
    background: var(--bg, var(--color-white));
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading, var(--font-noto-jp));
    font-weight: 700;
    line-height: var(--leading);
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

.mtk-picture {
    display: contents;
}

.mtk-picture > source {
    display: none;
}

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

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---- Layout container -------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--content-max, 60rem);
    margin-inline: auto;
    padding-inline: var(--space-m, 1.25rem);
}

/* ---- Buttons ----------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxs);
    padding: var(--space-xs) var(--space-l, 2rem);
    font-family: var(--font-heading, var(--font-noto-jp));
    font-weight: 700;
    color: var(--color-white);
    background: var(--brand-accent);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.btn:hover {
    opacity: 0.88;
}
.btn--brand {
    background: var(--brand);
    color: var(--text, var(--color-brown));
}
.btn--alt {
    background: var(--brand-alt);
}

/* =====================================================================
   Shared site header (shared markup, themed CTA color)
   ===================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface, var(--color-white));
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m, 1.25rem);
    width: 100%;
    max-width: 75rem; /* a bit wider than content for the bar */
    margin-inline: auto;
    padding: var(--space-xs) var(--space-m, 1.25rem);
}
.site-header__logo {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
}
.site-header__logo .logo-mark {
    width: 11.5rem;
} /* 184 */
.site-header__logo .logo-name {
    width: 12.5rem;
} /* 200 */
.site-header__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xxs);
    padding: var(--space-xs) var(--space-l, 2rem);
    background: var(--brand-accent, var(--color-brown));
    color: var(--color-white);
    font-family: var(--font-heading, var(--font-noto-jp));
    font-weight: 700;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.site-header__cta:hover {
    opacity: 0.9;
}

/* =====================================================================
   Shared site footer
   Identical on both page-sets, so it styles itself with FIXED primitive
   colors (not per-theme tokens). Only the font follows --font-body, which
   matches what the two source designs actually do.
   ===================================================================== */
.site-footer {
    display: flex;
    justify-content: center;
    background: var(--color-cream-3); /* #f5f0e3 */
    color: var(--color-brown); /* #483737 */
    font-family: var(--font-body, var(--font-noto-jp));
    padding: var(--space-xl, 3rem) var(--space-s) var(--space-xxl, 5rem);
}
.site-footer__inner {
    display: flex;
    align-items: center;
    gap: var(--space-xl, 3rem);
    width: 100%;
    max-width: 60rem; /* 960 */
}
.site-footer__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-l, 2rem);
    width: 23.125rem; /* 370 */
    max-width: 100%;
    flex-shrink: 0;
}

/* Logo (mark over name) */
.site-footer__logo {
    display: inline-flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 19.125rem;
    max-width: 100%;
}
.site-footer__logo .logo-mark {
    width: 14.375rem;
} /* 230 */
.site-footer__logo .logo-name {
    width: 19.125rem;
} /* 306 */

/* Address + Instagram */
.site-footer__contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
}
.site-footer__address {
    font-style: normal;
    font-size: var(--size-body, 1rem);
    line-height: var(--leading);
}
.site-footer__ig {
    flex-shrink: 0;
}
.site-footer__ig img {
    width: 2.125rem;
    height: 2.125rem;
} /* 34 */

/* Hours table */
.site-footer__hours {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.hours {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--size-small);
    line-height: var(--leading);
}
.hours th,
.hours td {
    padding: var(--space-xxxs) var(--space-xs);
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}
.hours thead th {
    background: var(--color-white);
}
.hours th.hours__corner {
    background: var(--color-white);
    text-align: left;
}
.hours tbody th {
    background: transparent;
    text-align: left;
}
.hours tbody th,
.hours tbody td {
    border-bottom: 1px solid var(--color-brown);
}
.hours__notes {
    font-size: var(--size-small);
    line-height: var(--leading);
}

/* Map area (right). */
.site-footer__map {
    display: grid;
    place-items: center;
    flex: 1 0 0;
    align-self: stretch;
    min-height: 13.75rem; /* 220 */
    overflow: hidden;
    background: var(--color-white);
}
.site-footer__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 13.75rem;
    border: 0;
}

/* Stack on narrow screens (the SP design uses a single column). */
@media (max-width: 800px) {
    .site-footer__inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-l, 2rem);
    }
    .site-footer__info {
        width: 100%;
    }
    .site-footer__map {
        width: 100%;
        min-height: 29.125rem;
    } /* 240 */
    .site-footer__map iframe {
        min-height: 29.125rem;
    }
}
@media (max-width: 400px) {
    .hours th,
    .hours td {
        padding-inline: 0.125rem;
        font-size: 0.75rem;
    }
}