@media print {
    @page {
        size: letter portrait;
        margin: 0.5in;
    }
}

/* Base font-size is 16px, so 1rem = 16px */
body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    position: relative;
    overflow-x: hidden; /* Prevent horizontal scroll from the decorative element */
}

body::before {
    content: '';
    position: absolute;
    top: -9.375rem; /* -150px */
    left: -9.375rem; /* -150px */
    width: 25rem; /* 400px */
    height: 25rem; /* 400px */
    background-color: #003366;
    border-radius: 50%;
    opacity: 0.08;
    z-index: -1;
}

.yearly-container {
    max-width: 62.5rem; /* 1000px */
    margin: 0 auto;
    padding-bottom: 5rem; /* 80px - Doubled bottom space for comfort */
}

.header {
    text-align: center;
    margin: 1.25rem 0; /* 20px */
    position: relative;
}

.brand-logo {
    max-height: 5rem; /* 80px */
    margin-bottom: 0.9375rem; /* 15px */
}

.header h1 {
    font-size: 2.25rem; /* ~36px, adjusted for rem scaling */
    color: #003366;
    margin: 0;
}

.all-months-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.875rem; /* 30px */
}

.month {
    padding: 0.625rem; /* 10px */
}

.month-title {
    text-align: center;
    font-weight: bold;
    font-size: 1.125rem; /* ~18px */
    margin-bottom: 0.625rem; /* 10px */
    color: #003366;
}

.day-names, .days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.day-names div {
    font-weight: bold;
    font-size: 0.75rem; /* 12px */
    color: #421c52;
}

.day-cell {
    font-size: 0.75rem; /* 12px */
    padding: 0.125rem 0; /* 2px */
}

.day-cell.empty {
    visibility: hidden;
}

.footer {
    text-align: right;
    font-size: 0.75rem; /* 12px */
    margin: 2.5rem auto 0 auto; /* 40px top margin */
    max-width: 63.75rem; /* 1020px */
}

.footer a {
    color: #003366;
    text-decoration: none;
}