:root {
    --pad-v: 5vh;
    --pad-h: 5vw;

    --mar-v: 0;
    --mar-h: 20vw;

    --logo-scale-desktop: scale(0.7);
    --logo-scale-mobile: scale(0.5);

    --duration: 1000ms;
    --function: ease-out;
    --delay: 10ms;
    --fill-mode: forwards;

    /* Tagline typography */
    --tagline-font-family: 'Castoro', Georgia, serif;
    --tagline-font-weight: bold;
    --tagline-font-size: clamp(24px, 2.8vw + 0.35rem, 24px);
    --tagline-font-size-small: clamp(18px, 3.2vw + 0.2rem, 20px);

    /* Waistline typography */
    --waitline-font-family: 'Castoro', Georgia, serif;
    --waitline-font-weight: normal;
    --waitline-font-size: clamp(20px, 2.3vw + 0.35rem, 20px);
    --waitline-font-size-small: clamp(16px, 3vw + 0.2rem, 18px);
}

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

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Castoro', Georgia, serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.landing {
    background: #000;
    color: #fff;
    padding:
            calc(var(--pad-v) + env(safe-area-inset-top))
            calc(var(--pad-h) + env(safe-area-inset-right))
            calc(var(--pad-v) + env(safe-area-inset-bottom))
            calc(var(--pad-h) + env(safe-area-inset-left));
    height: 100dvh;
    width: 100%;
    overflow: auto;
    position: relative;
}

#landing-hero {
    position: relative;
    height: 100%;
    margin: var(--mar-v) var(--mar-h);
    padding: var(--pad-v) var(--pad-h);
    opacity: 0;
    transform: translateY(8px);
    animation: fadeIn var(--duration) var(--function) var(--delay) var(--fill-mode);
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tagline {
    position: absolute;
    top: var(--pad-v);
    left: var(--pad-h);
    border-left: 3px solid #fff;
    padding-left: 20px;

    font-family: var(--tagline-font-family), serif;
    font-weight: var(--tagline-font-weight), serif;
    font-size: var(--tagline-font-size);
    line-height: 1.06;

    text-wrap: balance;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: manual;
    max-inline-size: 26ch;
}

.waitline {
    position: absolute;
    bottom: var(--pad-v);
    left: var(--pad-h);
    border-left: 3px solid #fff;
    padding-left: 20px;

    font-family: var(--waitline-font-family), serif;
    font-weight: var(--waitline-font-weight), serif;
    font-size: var(--waitline-font-size);
    line-height: 1.06;

    text-wrap: balance;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: manual;
    max-inline-size: 26ch;
}

.logo {
    position: absolute;
    top: 50%;
    right: var(--pad-h);
    width: 190px;
    height: auto;
    transform: var(--logo-scale-desktop) translateY(-50%);
    transform-origin: center center;
}

/* Responsive Adjustments */
@media (max-width: 900px) {
    .tagline, .waitline {
        max-inline-size: 22ch;
    }
}

@media (max-width: 600px) {
    body.landing {
        padding:
                calc(3.5vh + env(safe-area-inset-top))
                calc(3.5vh + env(safe-area-inset-right))
                calc(3.5vh + env(safe-area-inset-bottom))
                calc(3.5vh + env(safe-area-inset-left));
    }

    #landing-hero {
        margin: 0;
        padding: 3.5vh;
    }

    .tagline {
        top: 3.5vh;
        left: 3.5vh;
        font-size: var(--tagline-font-size-small);
    }

    .waitline {
        bottom: 3.5vh;
        left: 3.5vh;
        font-size: var(--waitline-font-size-small);
    }

    .logo {
        right: 3.5vh;
        transform: var(--logo-scale-mobile) translateY(-50%);
    }
}