/* ===== Default styles: large screens ===== */
* { box-sizing: border-box; }
body { margin: 0; background: #eef2f5; color: #1c2430; font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.5; }
#wrapper { max-width: 1000px; margin: 20px auto; background: #fff; overflow: hidden; }
header { background: #0b2545; color: #fff; text-align: center; padding: 20px 20px 0; }
header h1 { margin: 0; font-size: 2.6em; }
.tagline { margin: 4px 0 16px; font-style: italic; color: #bfe9e5; }
.banner { display: block; width: calc(100% + 40px); margin: 0 -20px; height: 160px; object-fit: cover; }
nav { background: #13a89e; }
nav ul { list-style: none; margin: 0; padding: 0; text-align: center; }
nav li { display: inline-block; }
nav a { display: block; padding: 12px 24px; color: #fff; text-decoration: none; font-family: Arial, sans-serif; font-weight: bold; }
nav a:hover { background: #0b2545; }
main { float: left; width: 70%; padding: 20px; }
.story { overflow: hidden; margin-bottom: 24px; border-bottom: 1px solid #d5dde3; padding-bottom: 16px; }
.story img { float: left; width: 240px; margin: 0 20px 10px 0; border-radius: 4px; }
.story h2 { margin: 0 0 8px; font-size: 1.4em; color: #0b2545; }
.story p { margin: 0; }
aside { float: right; width: 30%; padding: 20px; background: #e8f4f8; margin-top: 20px; border-radius: 4px; }
aside h3 { margin-top: 0; color: #0b2545; }
aside ul { padding-left: 18px; margin: 0; }
aside a { color: #0b2545; }
footer { clear: both; background: #0b2545; color: #fff; text-align: center; padding: 14px; font-size: .85em; }
footer p { margin: 0; }

/* ===== Media query 1: tablet (up to 800px) ===== */
@media (max-width: 800px) {
  body { font-size: 17px; }
  #wrapper { margin: 0 auto; }
  header h1 { font-size: 2.1em; }
  .banner { height: 120px; }
  main { float: none; width: 100%; padding: 16px; }
  aside { float: none; width: auto; margin: 0 16px 16px; }
  .story img { width: 160px; margin-right: 16px; }
  nav a { padding: 10px 16px; }
}

/* ===== Media query 2: phone (under 400px) ===== */
@media (max-width: 400px) {
  body { font-size: 15px; }
  #wrapper { margin: 0; }
  header { padding: 10px 10px 8px; }
  header h1 { font-size: 1.6em; }
  .tagline { margin: 2px 0 6px; font-size: .9em; }
  .hide-small { display: none; }          /* hides banner, sidebar, and two story images */
  nav a { padding: 8px 10px; font-size: .85em; }
  main { padding: 10px; }
  .story { margin-bottom: 12px; padding-bottom: 10px; }
  .story img { float: none; display: block; width: 100%; margin: 0 0 8px; }
  .story h2 { font-size: 1.15em; }
  footer { padding: 8px; }
}