@font-face {
    font-family: "Marfa";
    src: url("../assets/fonts/ABCMarfaSemi-Mono-Thin-Trial.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Marfa";
    src: url("../assets/fonts/ABCMarfaSemi-Mono-Regular-Trial.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Marfa";
    src: url("../assets/fonts/ABCMarfaSemi-Mono-Semibold-Trial.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../assets/fonts/Inter_18pt-Regular.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../assets/fonts/Inter_18pt-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../assets/fonts/Inter_18pt-SemiBold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: sans-serif;
  background: #fcfcfc;
  color: #111;
}

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

:root{
    --ui-font: "Marfa", monospace;
    --ui-size: 13px;
    --ui-spacing: .01em;

    --ui-offset: 20px;

    --page-pad-x: clamp(28px, 5vw, 80px);
    --page-pad-y: clamp(28px, 5vh, 60px);

    --reading-pad-x: clamp(90px, 11vw, 180px);

    --rule: 1px solid #111;
}

html {
    scroll-behavior: smooth;
}

html.is-legal-restoring body {
    visibility: hidden;
}

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

html,
body {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 800px) { html, body { overflow-x: clip; } }

img,
video,
svg {
    max-width: 100%;
}

/* Safari: nativen "Start Playback"-Button bei Autoplay-Vorschauen verstecken */
.media-item video::-webkit-media-controls-start-playback-button,
.network-hover-preview video::-webkit-media-controls-start-playback-button,
.mobile-work-media video::-webkit-media-controls-start-playback-button,
.accordion-media video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ---------- GLOBAL UI ---------- */

.site-header {
    display: flex;
    justify-content: space-between;

    font-family: var(--ui-font);
    font-size: var(--ui-size);
    font-weight: 200;
    letter-spacing: var(--ui-spacing);

    z-index: 100;
}

.site-header a {
    color: inherit;
    text-decoration: none;
}

.site-header a:hover {
    text-decoration: underline;
}

.logo {
    font-weight: 200;
}

.site-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.nav-current {
    font-weight: 400;
}

span.nav-current {
    cursor: default;
}


/* ---------- FOOTER ---------- */

.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding:
        clamp(32px, 5vh, 56px)
        var(--page-pad-x)
        clamp(32px, 5vh, 56px);

    font-family: var(--ui-font);
    font-size: 11px;
    font-weight: 200;
    letter-spacing: var(--ui-spacing);
    line-height: 1.35;
}

.site-footer p {
    margin: 0;
}

.site-footer a {
    display: block;

    color: #111;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.footer-brand,
.footer-top,
.footer-legal,
.footer-contact {
    width: max-content;
}

.footer-contact {
    text-align: right;
}

/* ---------- Footer top rule for pages without Project Nav ---------- */

.site-footer--with-rule {
    position: relative;
}


.site-footer--with-rule::before {
    content: "";

    position: absolute;
    top: 0;
    left: var(--ui-offset);
    right: var(--ui-offset);

    border-top: var(--rule);
}

/* ------ Footer mobil ------ */

@media (max-width: 800px) {
    .site-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        row-gap: 32px;

        font-size: 12px;

        padding:
            40px
            20px
            20px;
    }

    .footer-brand,
    .footer-top,
    .footer-legal,
    .footer-contact {
        width: auto;
    }

    .footer-brand {
        grid-column: 1;
        grid-row: 1;
    }

    .footer-top {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    .footer-contact {
        grid-column: 1;
        grid-row: 2;
        text-align: left;
    }

    .footer-legal {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }
}