/* Wings Around the World - plain CSS replacement for the iWeb build.
   Four original iWeb images were not in the saved files, so those areas use
   flat colors for now. To restore them, drop the originals next to this file
   and uncomment the matching url() lines:
     Mod_background.jpg -> --bg-image      (tiled page background)
     Mod_page_bg.jpg    -> --page-image    (tiled panel background)
     Mod_menu_bar.jpg   -> --header-image  (title bar)
     Mod_menu_bar_1.jpg -> --nav-image     (nav strip)
*/

:root {
  --bg-color: #9db8af;
  --page-color: #dfe9e5;
  --header-color: #6f9488;
  --nav-color: #7a9d91;
  --text: #515151;

  /* --bg-image: url("Mod_background.jpg"); */
  /* --page-image: url("Mod_page_bg.jpg"); */
  /* --header-image: url("Mod_menu_bar.jpg"); */
  /* --nav-image: url("Mod_menu_bar_1.jpg"); */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-color) var(--bg-image, none) repeat top left;
  font-family: Helvetica, Arial, sans-serif;
  color: var(--text);
}

.wrap {
  width: 100%;
  max-width: 684px;
  margin: 10px auto;
  background: var(--page-color) var(--page-image, none) repeat top left;
}

header {
  min-height: 89px;
  padding: 31px 31px 12px;
  background: var(--header-color) var(--header-image, none) repeat top left;
}

header h1 {
  margin: 0;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 36px;
  font-weight: 100;
  line-height: 43px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

nav {
  margin: 0 15px;
  padding: 0 0 7px;
  background: var(--nav-color) var(--nav-image, none) repeat top left;
  font-size: 11.2px;
  line-height: 1.6em;
  text-transform: uppercase;
}

nav ul { list-style: none; margin: 0; padding: 0; }

nav li { display: inline; padding: 0 5px 0 15px; }

nav a { color: #000; text-decoration: none; }
nav a:hover { color: #463c3c; }
nav a[aria-current="page"] { color: #fff; font-weight: bold; }

main { padding: 10px 28px 40px; }

.top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tagline {
  flex: 0 0 304px;
  margin: 17px 0 0;
  padding: 4px;
  color: var(--text);
  font-size: 36px;
  font-weight: 700;
  line-height: 47px;
}

.logo { flex: 0 0 auto; max-width: 327px; height: auto; }

.story { margin-top: 20px; padding: 4px 5px; }

.story p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.45;
}

.todo {
  border: 2px dashed #c00;
  background: #fff8f8;
  padding: 12px;
  margin: 1em 0;
  font-size: 14px;
}

footer {
  height: 104px;
  background: url("footer-bg.jpg") no-repeat top left;
  background-size: 100% 100%;
}

@media (max-width: 640px) {
  header { padding: 24px 16px 12px; }
  header h1 { font-size: 26px; line-height: 34px; }
  nav { margin: 0 8px; }
  main { padding: 10px 16px 30px; }
  .top { flex-direction: column; align-items: center; }
  .tagline { flex: none; margin-top: 0; font-size: 28px; line-height: 36px; }
  .logo { max-width: 100%; }
}