:root {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 62.5%;

    /* Design Tokens */
    /* Brand Colors Java, cf. https://www.oracle.com/a/ocom/docs/java-licensing-logo-guidelines-1908204.pdf */
    --brand-java-blue-dark: #007396;
    --brand-java-orange: #ED8B00;
    --color-ink: #3a3a3a;
    --color-ink-deep: #000000;
    --color-sheet: #ffffff;

    /* Spacing Scale */
    --space-xxs: 0.1rem;
    --space-xs: 0.8rem;
    --space-sm: 1.6rem;
    --space-md: 3.2rem;
    --space-lg: 6.4rem;
    --space-xl: 9.6rem;

    /* Thickness Scale */
    --thickness-1: 0.1rem;
    --thickness-2: 0.2rem;
    --thickness-3: 0.3rem;
    --thickness-4: 0.4rem;
    --thickness-5: 0.5rem;

    /* Font Sizes */
    --font-size-xxs: 1.2rem;
    --font-size-xs: 1.4rem;
    --font-size-sm: 1.8rem;
    --font-size-lg: 2.4rem;
    --font-size-xl: 4rem;
}

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

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-sm);
    background: var(--color-ink);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    font-weight: 700;
    text-decoration: none;
    z-index: 200;

    &:focus { top: 0; }
}

body {
    margin: 0;
    padding: clamp(var(--space-sm), 4vw, var(--space-md));
    min-height: 100vh;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    font-family: 'JetBrains Mono', monospace;
    color: var(--color-ink);
    background-color: var(--color-ink);
}

.page-sheet {
    background: var(--color-sheet);
    border-radius: 1.2rem;
    overflow: hidden;
    max-width: 120rem;
    margin: 0 auto;
}

.container {
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 clamp(var(--space-sm), 4vw, var(--space-md));
}

/* Navigation */
header {
    padding: clamp(var(--space-md), 6vw, var(--space-lg)) 0;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(var(--space-sm), 3vw, var(--space-md));

    .logo {
        display: flex;
        align-items: center;

        img {
            height: clamp(3rem, 12vw, 19rem);
            width: auto;
        }
    }

    ul {
        display: flex;
        list-style: none;
        gap: clamp(var(--space-sm), 2vw, var(--space-lg));
        margin: 0;
        padding: 0;
    }

    li a {
        border: var(--thickness-3) solid var(--brand-java-blue-dark);
        border-radius: var(--space-md);
        font-size: clamp(var(--font-size-sm), 2vw, var(--font-size-lg));
        padding: clamp(var(--space-xxs), 0.5vw, var(--space-xs)) clamp(var(--space-xs), 1.5vw, var(--space-sm));

        &:hover {
            color: var(--color-ink);
            border-color: var(--color-ink);
        }

        @media (prefers-reduced-motion: no-preference) {
            transition: color 0.15s ease, border-color 0.15s ease;
        }
    }

    a {
        color: var(--brand-java-blue-dark);
        text-decoration: none;
        font-weight: 700;
        text-transform: uppercase;

        &:hover { color: var(--brand-java-blue-dark); }

        &:focus-visible {
            outline: var(--thickness-4) solid var(--brand-java-orange);
            outline-offset: var(--space-xs);
            border-radius: var(--space-xs)
        }

        @media (prefers-reduced-motion: no-preference) {
            transition: color 0.15s ease;
        }
    }


}

/* Main Content */
main {
    padding: clamp(var(--space-lg), 8vw, var(--space-xl)) clamp(var(--space-sm), 4vw, var(--space-md));
}

section {
    margin-bottom: var(--space-xl);

    h2 {
        font-size: var(--font-size-xl);
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: -0.03em;
        line-height: 1;
        margin: 0 0 var(--space-lg) 0;
        border-bottom: 0.4rem solid var(--color-ink);
        padding-bottom: var(--space-md);

        @media (max-width: 48rem) { font-size: var(--font-size-lg); }
    }
}


/* Grid & Cards */
.meetup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(34rem, 1fr));
    gap: var(--space-md);
    container-type: inline-size;
    container-name: meetup-grid;
}

.meetup-card {
    background: var(--color-sheet);
    border: 0.1rem solid rgb(0 0 0 / 0.1);
    border-radius: 0.8rem;
    box-shadow: 0 0.2rem 1.2rem rgb(0 0 0 / 0.07);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    container-type: inline-size;

    time {
        font-weight: 900;
        color: var(--brand-java-blue-dark);
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        letter-spacing: calc(-1 * var(--space-xxs));
        font-variant-numeric: tabular-nums;
    }

    h3 {
        font-size: var(--font-size-lg);
        font-weight: 900;
        line-height: 1.1;
        margin: 0;
        letter-spacing: calc(-1 * var(--space-xxs));

        @container meetup-grid (max-width: 71rem) { font-size: var(--font-size-lg); }
    }

    p {
        margin: 0;
        color: var(--color-ink-deep);
        font-size: var(--font-size-sm);
    }
}