:root {
    color-scheme: light;
    --entry-ink: #1f3026;
    --entry-green: #387b29;
    --entry-paper: #fffefa;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--entry-ink);
    background: var(--entry-paper);
    font-family: 'Open Sans', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.entry-header {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: max(clamp(1.5rem, 5vw, 4.5rem), calc((100% - 1360px) / 2));
    background: var(--entry-paper);
}

.entry-logo {
    position: relative;
    flex: 0 0 152px;
    width: 152px;
    height: 48px;
}

.entry-logo img {
    position: absolute;
    width: 224px;
    height: auto;
    left: -36px;
    top: -10px;
}

.entry-header p {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.entry-main {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    justify-items: end;
    min-height: calc(100vh - 80px);
    min-height: calc(100svh - 80px);
    padding: 64px max(clamp(1.5rem, 5vw, 4.5rem), calc((100% - 1360px) / 2)) 96px;
    background: #304635;
}

.entry-photo,
.entry-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.entry-photo {
    object-fit: cover;
    object-position: 38% 58%;
}

.entry-shade {
    z-index: -1;
    background: linear-gradient(90deg, rgba(12, 30, 18, 0.04) 20%, rgba(12, 30, 18, 0.12) 50%, rgba(12, 30, 18, 0.38)),
        linear-gradient(0deg, rgba(12, 30, 18, 0.26), transparent 40%);
}

.entry-card {
    width: min(100%, 452px);
    padding: clamp(1.75rem, 3.5vw, 3rem);
    /* A transparent green tint keeps the photograph visible behind the copy. */
    background: rgba(14, 33, 23, 0.44);
    color: var(--entry-paper);
    border: 1px solid rgba(255, 254, 250, 0.3);
    border-top: 2px solid rgba(183, 214, 151, 0.8);
    border-radius: 6px;
    box-shadow: 0 16px 48px rgba(8, 23, 14, 0.12);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

.entry-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 1.4rem;
    color: #e1efcf;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.65rem;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.entry-kicker::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
}

h1 {
    margin: 0 0 1.4rem;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(2.8rem, 4vw, 3.7rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

h1 span { display: block; }
h1 span[lang='de'] { color: #e1efcf; }

.entry-instruction {
    margin: 0 0 1.8rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--entry-paper);
}

.entry-instruction span { display: block; }

.entry-languages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.language-link {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px 4px;
    padding: 18px 16px;
    border: 1px solid rgba(255, 254, 250, 0.45);
    border-radius: 4px;
    background: rgba(12, 30, 18, 0.22);
    color: var(--entry-paper);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.language-link:hover {
    border-color: #e1efcf;
    background: rgba(12, 30, 18, 0.4);
    box-shadow: 0 3px 12px rgba(8, 23, 14, 0.1);
}

.language-link:focus-visible {
    outline: 3px solid var(--entry-paper);
    outline-offset: 4px;
}

.language-flag {
    grid-column: 1 / -1;
    width: 36px;
    height: 24px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(31, 48, 38, 0.12);
}

.language-flag--nl { background: linear-gradient(#ae1c28 0 33.333%, #fff 33.333% 66.666%, #21468b 66.666%); }
.language-flag--de { background: linear-gradient(#171717 0 33.333%, #d00 33.333% 66.666%, #ffce00 66.666%); }
.language-arrow { width: 17px; height: 17px; color: #e1efcf; }

.entry-wave {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: 48px;
    color: var(--entry-paper);
    pointer-events: none;
}

.entry-leaf {
    position: absolute;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--entry-paper);
}

.entry-leaf img { width: 31px; height: 31px; object-fit: contain; }

@media (min-aspect-ratio: 2/1) {
    .entry-photo { object-position: 50% 62%; }
}

@media (max-width: 760px) {
    .entry-header { height: 72px; padding-inline: 24px; }
    .entry-header p { display: none; }
    .entry-main {
        min-height: calc(100vh - 72px);
        min-height: calc(100svh - 72px);
        padding: clamp(220px, 37svh, 340px) 20px 72px;
        align-items: end;
        justify-items: center;
    }
    .entry-photo { object-position: 9% 50%; }
    .entry-shade { background: linear-gradient(180deg, transparent 15%, rgba(12, 30, 18, 0.18) 48%, rgba(12, 30, 18, 0.46)); }
    .entry-card { max-width: 410px; padding: 26px; }
    .entry-kicker { margin-bottom: 14px; font-size: 0.6rem; }
    h1 { font-size: clamp(2.6rem, 9vw, 3.2rem); margin-bottom: 16px; }
    .entry-instruction { margin-bottom: 22px; font-size: 0.8125rem; }
    .language-link { padding: 15px 12px; gap: 12px 4px; font-size: 0.8125rem; }
}

@media (max-width: 760px) and (max-height: 700px) {
    .entry-main { padding-top: clamp(72px, 16svh, 112px); padding-bottom: 60px; }
}

@media (max-width: 380px) {
    .entry-main { padding-inline: 14px; }
    .entry-card { padding: 22px; }
    .entry-languages { gap: 8px; }
    .language-link { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .language-link { transition: none; }
}
