/*
   =========================================================
   ZOOM PHOTO STUDIO - COMMON.CSS v3.0
   =========================================================
*/

html {
    background: var(--zoom-warm-white);
}

body {
    background: var(--zoom-warm-white);
    color: var(--zoom-text);
    font-family: var(--zoom-sans);
    font-size: var(--zoom-body-size);
    line-height: var(--zoom-body-line);
    -webkit-font-smoothing: antialiased;
}

body.menu_open {
    overflow: hidden;
}

.container {
    width: min(var(--zoom-max), calc(100% - (var(--zoom-pad) * 2)));
    margin-inline: auto;
}

main {
    overflow: hidden;
}

/*
   LEGACY GLOBAL ALIASES
   These remain for existing pages while new work uses zoom_* classes.
   =========================================================
*/

.eyebrow {
    color: var(--zoom-muted);
    font-size: var(--zoom-kicker-size);
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.eyebrow.centred {
    text-align: center;
}

.button {
    display: inline-flex;
    min-height: 48px;
    padding: 12px 20px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--zoom-charcoal);
    font-size: var(--zoom-button-size);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.button_dark {
    background: var(--zoom-charcoal);
    color: var(--zoom-white);
}

.button_dark:hover,
.button_dark:focus-visible {
    background: var(--zoom-bronze);
    border-color: var(--zoom-bronze);
}

.button_outline {
    background: transparent;
    color: var(--zoom-charcoal);
}

.button_outline:hover,
.button_outline:focus-visible {
    background: var(--zoom-charcoal);
    color: var(--zoom-white);
}

.text_link {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    color: var(--zoom-charcoal);
    font-size: var(--zoom-link-size);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.text_link span {
    color: var(--zoom-bronze);
    transition: transform 0.2s ease;
}

.text_link:hover span {
    transform: translateX(4px);
}