/* Global Styles */
* {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;

    color: var(--color-black);
    background: white;

    font: var(--font-base);

    display: grid;
    grid-template-columns: 1fr;
}

/* Headings */
h1   { font: var(--font-2xl); }
h2   { font: var(--font-xl); }
h3   { font: var(--font-lg); }

/* Small */
small {
    font: var(--font-sm);
    font-weight: bold;
}

section {
    padding-block: var(--space-sm);
}

/* Anchors */
a {
    text-decoration: none;
    color: var(--color-primary);
}

nav a { color: var(--color-black); }

a:hover {
    color: var(--color-accent);
}

a.active {
    text-decoration: underline;
    color: var(--color-accent);
}

.button-wrapper {
    margin: var(--space-md);
}

.btn {
    background: var(--color-primary);
    color: white;
    padding: var(--space-xs) var(--space-lg);
    border-radius: 2rem; /* ~6px, subtle rounded corners */
    box-shadow: 0 0 0 1px rgba(145, 18, 188, 0.2); /* soft halo */
    cursor: pointer;
}

.btn:hover {
    box-shadow: 0 0 0 3px rgba(111, 45, 189, 0.3);
    color: white;
}

.thumbnail-sm {
    width: auto;
    height: var(--img-sm);
    border-radius: 0.5rem; /* rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* soft shadow */
}

.thumbnail-base {
    width: auto;
    height: var(--img-base);
    border-radius: 0.5rem; /* rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* soft shadow */
}

.thumbnail-md {
    width: auto;
    height: var(--img-md);
    border-radius: 0.5rem; /* rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* soft shadow */
}

.thumbnail-lg {
    width: auto;
    height: var(--img-lg);
    border-radius: 0.5rem; /* rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* soft shadow */
}

video {
    width: auto;
    height: var(--img-lg);
    border-radius: 0.5rem; /* rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* soft shadow */
}