* { /* same box sizing */
    box-sizing: border-box; /* padding and border in width */
}

body {
    margin: 0; 
    font-family: Arial, Helvetica, sans-serif; /*font */
    font-size: 100%; 
    line-height: 1.5; /* line spacing */
    color: #000000; /* text colour */
    background-color: #ffffff; 
}

img {
    max-width: 100%; /* responsive images */
    height: auto; /* ratio */
    border: 0; 
}

a { /* link style */
    color: #003366;
}

.visually-hidden {
    position: absolute;
    left: -9999px;
}

a:hover,
a:focus { /* link hover and focus */
    text-decoration: none; /* remove underline */
}

.site-header { 
    min-height: 140px; /* header height */
    padding: 0 1rem; /* horizontal padding */
    background-color: #ef9a9a; 
    border: 2px solid #000000;
    border-bottom: 0;
}

.header-inner { 
    display: flex; /* flex */
    align-items: flex-start; /* align top */
    gap: 1rem; /* space between items */
    padding-top: 0.75rem; /* top spacing */
}

.site-logo {
    width: 190px;
    margin: 0; 
    padding: 0.75rem 1rem; /* inner space */
    color: #ffffff; 
    background-color: #f4b6b6; 
    font-size: 2rem; /* large text */
    line-height: 1.1; /* line spacing */
}

.site-nav { /* nav container */
    flex: 1; /* remaining space */
}

.site-nav ul { 
    display: flex; /* horizontal layout */
    flex-wrap: wrap; /* wrap items */
    margin: 0;
    padding: 0;
    list-style: none; /* remove bullets */
    background-color: #f6b6b6;
    border: 1px solid #cc8f8f;
}

.site-nav li {
    margin: 0;
}

.site-nav a {
    display: block; /* block links */
    padding: 0.75rem 1.25rem; /* space inside */
    color: #555555;
    text-decoration: none; /* remove underline */
    font-weight: bold;
}

.site-nav a:hover,
.site-nav a:focus { /* nav hover */
    color: #000000; 
    background-color: #ffffff; 
    outline: 2px solid #000000; /* focus outline */
    outline-offset: -2px; /* adjust outline */
}

.site-main {
    padding: 1rem; 
    background-color: #dddddd; 
    border-left: 2px solid #000000; 
    border-right: 2px solid #000000;
}

.main-layout { /* layout container */
    display: flex; /* flex layout */
    /* align-items: flex-start; align top */
    align-items: stretch; /*makes equal height */
    gap: 1rem; /* spacing */
}

.content-area { /* left content */
    flex: 1 1 auto; /* flexible width */
    min-width: 0; /* prevent overflow */
    padding: 1rem; /* inner space */
    background-color: #ffffff; 
    display: flex; 
    flex-direction: column;
}

.heading-panel,
.articles-panel,
.sidebar-panel { /* inner boxes */
    padding: 1rem; /* spacing */
    background-color: #b8b6ff;
}

.heading-panel { 
    margin-bottom: 1rem; /* space below */
}

.articles-panel { /* article section */
    flex: 1;
    min-height: 340px; /* height */
}

.sidebar { /* right column */
    width: 250px; /* fixed width */
    flex: 0 0 250px; /* prevent resize */
    margin-left: auto; /* push right */
    padding: 1rem; /* spacing */
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

.controls-panel { /* top right box */
    margin-bottom: 1rem; 
}

.supplementary-panel { /* bottom right box */
    flex: 1;
    min-height: 340px; 
}

.heading-panel h2,
.articles-panel h2,
.sidebar-panel h2,
.site-footer h2 {
    margin: 0; 
    font-size: 1.25rem;
}

.news-article { 
    margin-top: 1rem; /* space above */
    padding: 1rem; /* inner space */
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

.news-article h3 { 
    margin: 0 0 0.75rem 0; 
    font-size: 1.15rem;
}

.article-header { 
    display: flex; /* flex layout */
    align-items: flex-start; /* align top */
    gap: 1rem; /* spacing */
    margin-bottom: 0.75rem; /* space below */
}

.article-date-box { 
    flex: 0 0 60px; 
    margin: 0; 
    text-align: center; 
    font-weight: bold; 
}

.article-day,
.article-month { 
    display: block; /* new line */
}

.article-day { 
    font-size: 1.8rem; 
    line-height: 1; /* spacing */
}

.article-month { 
    margin-top: 0.25rem; /* spacing */
    font-size: 0.95rem; 
}

.article-meta { 
    margin: 0; 
    font-size: 0.95rem; 
}

.site-footer { 
    min-height: 300px; 
    padding: 1rem; /* spacing */
    color: #ffffff; 
    background-color: #555555;
    border: 2px solid #000000; 
    border-top: 0; 
}

@media (max-width: 768px) { /* responsive */
    .header-inner {
        flex-direction: column; /* stack items */
    }

    .site-logo {
        width: 100%; /* full width */
    }

    .main-layout {
        flex-direction: column; /* stack layout */
    }

    .sidebar {
        width: 100%; /* full width */
        flex: 1 1 auto; /* flexible */
    }

    .article-header {
        flex-direction: column; /* stack */
    }

    .article-date-box {
        text-align: left; /* align left */
    }
}