:root {
--primary: #003f5c;
--text: #111;
--bg: #ffffff;
--secondary: #f5f7fa;
--focus: #ffbf47;
--max-width: 1100px;
}


* { box-sizing: border-box; }


html { font-size: 18px; }


body {
margin: 0;
font-family: Arial, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}


.skip-link {
position: absolute;
left: -999px;
top: -999px;
}
.skip-link:focus {
left: 0;
top: 0;
background: #000;
color: #fff;
padding: .5rem;
z-index: 100;
}


header {
background: var(--primary);
color: #fff;
padding: 1rem;
}


header h1 { margin: 0; font-size: 1.8rem; }


nav ul {
list-style: none;
padding: 0;
margin: .5rem 0;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}


nav a {
color: #fff;
text-decoration: underline;
}


nav a:hover,
nav a:focus { text-decoration: none; }


main {
max-width: var(--max-width);
margin: auto;
padding: 1.5rem 1rem;
}


h2 { color: var(--primary); }


section { margin-bottom: 2.5rem; }


ul { padding-left: 1.2rem; }


table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}


th, td {
border: 1px solid #ccc;
padding: .75rem;
text-align: left;
}


th { background: var(--secondary); }


footer {
background: var(--secondary);
padding: 1rem;
font-size: .95rem;
}


:focus {
outline: 3px solid var(--focus);
outline-offset: 2px;
}


@media (max-width: 700px) {
nav ul { flex-direction: column; }
}