:root {
    --bg: #001f3f;      /* Heavenly light blue */
    --card: #f4ed9b;    /* White card surfaces */
    --bgtext: #f4ed9b;
    --cardtext: #001f3f; /* Sunny amber-yellow for primary text */
    --muted: #64748b;   /* Soft blue-gray for muted text */
    --line: #fef3c7;    /* Light pastel yellow for borders/lines */
    --accent: #ca7a0c;  /* Bright sunflower yellow for accents */
    --link: #a5900a;    /* Deep ocean blue for links */
    --radius: 16px;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* 1) base layout */
html,
body {
    height: 100%;
}
body {
    margin: 0;
    min-height: 100dvh; /* fills viewport on mobile too */
    display: flex;
    flex-direction: column;
    background: white;
    color: var(--bgtext);
    font:
            16px/1.5 system-ui,
            -apple-system,
            Segoe UI,
            Roboto,
            Ubuntu,
            "Helvetica Neue",
            Arial;
}

* {
    box-sizing: border-box;
}

/* 2) sticky header */
.site-header {
    position: sticky; /* sticks to viewport top */
    top: 0;
    z-index: 1000; /* sit above page content */
    border-bottom: 1px solid #e5e7eb;
    /* optional niceties */
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    background: var(--bg);
    color: var(--bgtext);
}

/* 4) footer: normal flow (not sticky) */
.site-footer {
    margin-top: auto; /* ensures bottom placement on short pages */
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.9rem;
    background: var(--bg);
    color: var(--bgtext);
}

/* 5) optional: anchor offset so in-page links aren’t hidden under sticky header */
:target {
    scroll-margin-top: 72px; /* adjust to your header height */
}

.site-header a {
    display: flex; /* make children (logo + h1) line up horizontally */
    align-items: center; /* vertically center them */
    gap: 0.5rem; /* space between logo and h1 */
    text-decoration: none; /* already inline but keep here */
    color: var(--bgtext); /* h1 inherits text color from parent */
}

.site-footer a {
    color: var(--link);
}

/* 3) main area expands to push footer down on short pages */
main {
    flex: 1 0 auto; /* take remaining height */
    max-width: 1100px;
    margin: auto;
    padding: 24px 16px 32px;
}

.wrap {
    max-width: 1100px;
    margin: auto;
    padding: 16px;
}
.row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

a {
    color: inherit;
    text-decoration: none;
}

h1 {
    font-size: 20px;
    margin: 0;
}

.card {
    display: block;
    color: var(--cardtext);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}