:root {
    color-scheme: dark;
    --gold: #e3c580;
    --text: #eee8dc;
    --muted: #d4d6d5;
}

* { box-sizing: border-box; }

html {
    min-height: 100%;
    background: #101a27;
}

body {
    margin: 0;
    min-width: 280px;
    color: var(--text);
    font-family: Georgia, "Times New Roman", serif;
    -webkit-font-smoothing: antialiased;
}

.world-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgb(6 14 24 / 12%), rgb(6 14 24 / 5%) 65%, rgb(6 14 24 / 24%)),
                url("../images/sosaria-background.webp") center center / cover no-repeat;
}

.landing {
    width: min(100% - 48px, 1100px);
    min-height: 100vh;
    min-height: 100svh;
    margin-inline: auto;
    padding-block: clamp(42px, 7vh, 84px) 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(30px, 5vh, 58px);
}

.brand {
    width: min(100%, 840px);
    aspect-ratio: 3 / 1;
    display: grid;
    place-items: center;
    position: relative;
}

.brand-logo {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 5px 14px rgb(0 0 0 / 45%));
}

.brand-fallback {
    margin: 0;
    text-align: center;
    font-size: clamp(28px, 5vw, 58px);
    color: var(--gold);
    text-shadow: 0 2px 12px #000;
}

.brand-fallback span {
    display: block;
    font-size: 14px;
    letter-spacing: .18em;
    margin-top: 12px;
}

[hidden] { display: none !important; }

.navigation {
    position: relative;
    width: 100%;
    aspect-ratio: 2172 / 370;
    margin-top: -20px;
}

.navigation-frame {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgb(0 0 0 / 35%));
}

.navigation-list {
    position: absolute;
    /* Freier blauer Innenbereich zwischen den seitlichen Kompassverzierungen. */
    inset: 34% 13% 28%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

.navigation-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 8px;
    min-height: 44px;
    padding: 2px 6px;
    color: #e3ce9b;
    font-size: clamp(13px, 1.3vw, 16px);
    text-decoration: none;
    text-shadow: 0 2px 4px #000;
    border-radius: 3px;
    transition: color 200ms ease, background-color 200ms ease;
}

.navigation-icon {
    display: block;
    width: 30px;
    height: 36px;
    object-fit: contain;
    transition: filter 200ms ease;
}

.navigation-link:hover, .navigation-link[aria-current="page"] {
    color: #fff0bd;
    background-color: rgb(224 183 88 / 10%);
}

.navigation-link:hover .navigation-icon,
.navigation-link[aria-current="page"] .navigation-icon {
    filter: brightness(1.18) drop-shadow(0 0 4px rgb(255 202 94 / 45%));
}

.navigation-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    color: #fff0bd;
}

/* Fünf Einträge benötigen etwa 124px je Spalte plus Abstände.
   Der Rahmen lässt nur 74% seiner Breite frei; 960px gibt genug Reserve. */
@media (max-width: 960px) {
    .navigation {
        aspect-ratio: auto;
        margin-top: -10px;
        padding: 18px;
        border: 1px solid rgb(214 180 110 / 50%);
        border-radius: 3px;
        background: rgb(10 23 37 / 88%);
        box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
    }
    .navigation-frame { display: none; }
    .navigation-list {
        position: relative;
        inset: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        padding: 0;
    }
    .navigation-list li { flex: 0 1 112px; max-width: 100%; min-width: 0; }
    .navigation-link { min-height: 72px; flex-direction: column; gap: 4px; }
    .navigation-icon { width: 32px; height: 39px; }
}

@media (max-width: 480px) {
    .navigation-list li { flex-basis: 100px; }
    .navigation-link { font-size: 13px; }
    .navigation { padding-inline: 12px; }
}

.welcome {
    position: relative;
    width: min(100%, 660px);
    padding: 24px clamp(20px, 4vw, 44px) 22px;
    text-align: center;
    background: linear-gradient(135deg, rgb(12 22 33 / 83%), rgb(10 18 27 / 78%));
    border: 1px solid rgb(214 180 110 / 35%);
    border-radius: 3px;
    box-shadow: 0 12px 45px rgb(0 0 0 / 24%), inset 0 0 0 4px rgb(215 180 110 / 3%);
    backdrop-filter: blur(4px);
}

h1 {
    margin: 15px 0 12px;
    color: var(--gold);
    font-weight: 400;
    font-size: clamp(23px, 2.6vw, 32px);
    line-height: 1.3;
    text-wrap: balance;
    text-shadow: 0 2px 5px rgb(0 0 0 / 35%);
}

.welcome p {
    max-width: 520px;
    margin: 0 auto;
    color: var(--muted);
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.75;
    text-wrap: pretty;
}

.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--gold);
    font-size: 16px;
    line-height: 1;
}

.ornament::before, .ornament::after {
    content: "";
    width: 78px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(227 197 128 / 55%));
}

.ornament::after { transform: rotate(180deg); }
.ornament-bottom { margin-top: 20px; font-size: 6px; opacity: .65; }
.ornament-bottom::before, .ornament-bottom::after { width: 46px; }

[data-reveal] { transition: opacity 280ms ease-out; }
.js [data-reveal]:not([data-ready]) { opacity: 0; }

@media (max-width: 600px) {
    .world-background { background-position: center, 62% center; }
    .landing {
        width: calc(100% - 32px);
        padding-top: clamp(48px, 10svh, 86px);
        gap: 34px;
    }
    .welcome { padding-block: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal], .navigation-link, .navigation-icon { transition: none; }
}