/* moselewski.de design system: brochure CI (design proposal "Variante 1 Markenfortführung"). */

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/oswald-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/oswald-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/oswald-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
}

:root {
    --ms-navy: var(--theme-palette-color-1, #1b2437);
    --ms-navy-deep: var(--theme-palette-color-2, #141a2a);
    --ms-ink: var(--theme-palette-color-3, #232a3a);
    --ms-muted: var(--theme-palette-color-4, #5a6274);
    --ms-line: var(--theme-palette-color-5, #dde2eb);
    --ms-mist: var(--theme-palette-color-6, #f2f4f8);
    --ms-steel: var(--theme-palette-color-8, #8b93a3);
    --ms-on-navy: #b9c0ce;
    --ms-hex: polygon(50% 2%, 98% 26%, 98% 74%, 50% 98%, 2% 74%, 2% 26%);
    --ms-font-display: "Oswald", "Arial Narrow", sans-serif;
    --ms-font-body: "Source Sans 3", system-ui, sans-serif;
}

/* Eyebrow label above section headings. */
.ms-eyebrow {
    font-family: var(--ms-font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.75rem;
    color: var(--ms-muted);
}
.ms-on-navy .ms-eyebrow {
    color: var(--ms-on-navy);
}

/* Hexagon image mask, pointy-top, W:H = 1 : 1.155. */
.ms-hex,
.ms-hex img {
    clip-path: var(--ms-hex);
}
.ms-hex {
    aspect-ratio: 1 / 1.155;
    overflow: hidden;
}
.ms-hex img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}