/* Shared styles for the rebuilt hub pages; colours/fonts follow "Mission CSS.css" (2008). */
:root { --navy: #009; --green: #058f04; --gold: #ffd20c; --gray: #aaa; --lime: #ccff66; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--gray); color: var(--navy);
       font: 700 14px/1.45 Verdana, Arial, Helvetica, sans-serif; }
a { color: var(--green); text-decoration: none; }
a:hover, a:focus-visible { color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
.page { max-width: 980px; margin: 0 auto; padding: 12px 16px 32px; }
.top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
       gap: 4px 24px; margin-bottom: 16px; }
.top h1 { font-size: 26px; line-height: 1.15; margin: 0; }
.top .homelinks { display: flex; gap: 16px; }
.cols { display: grid; grid-template-columns: 290px 1fr; gap: 24px 32px; align-items: start; }
.cols > * { min-width: 0; }
h2 { font-size: 16px; margin: 0 0 10px; }
p { margin: 0 0 12px; }
.intro { max-width: 46em; font-size: 13px; }
.menu { list-style: none; margin: 0 0 20px; padding: 0; }
.menu li { margin: 0; }
.menu a { display: block; padding: 4px 0 4px 30px; min-height: 28px;
          background: url(Dot.gif) no-repeat 2px 50%; }
.menu a:hover, .menu a:focus-visible { background-image: url(DotBlue.gif); }
.plain { list-style: none; margin: 0; padding: 0; }
.plain a { display: block; padding: 3px 0; }
.logo { width: 100%; max-width: 600px; margin: 8px auto 0; }
.tiles { display: grid; grid-template-columns: repeat(2, 112px); gap: 0; margin: 8px 0 16px; }
.tiles.gap { gap: 16px; }
/* Month grid used by Updates and Photos: one row per year, months wrap on narrow screens. */
.months { margin-bottom: 16px; }
.months .first { display: inline-block; margin-bottom: 10px; }
.months .yr { display: grid; grid-template-columns: 3.5em 1fr; align-items: start; margin-bottom: 6px; }
.months .yr > div { display: flex; flex-wrap: wrap; }
.months .yr a, .months .yr span { width: 3.4em; padding: 2px 0; }
.storylist { columns: 2 16em; column-gap: 32px; list-style: none; padding: 0; margin: 0 0 16px; }
.storylist a { display: block; padding: 3px 0; break-inside: avoid; }
.frame { border: 4px solid var(--navy); }
figure { margin: 0 0 20px; }
figcaption { text-align: center; font-size: 15px; margin-top: 6px; }
.address { font: 400 16px/1.3 "Times New Roman", serif; margin: 0 0 18px 48px; }
footer { margin-top: 40px; font-size: 11px; text-align: center; }
footer a { color: var(--navy); text-decoration: underline; }
@media (max-width: 720px) {
  .cols { grid-template-columns: 1fr; }
  .top h1 { font-size: 22px; }
  body { font-size: 15px; }
  .menu a, .plain a, .storylist a { padding-top: 7px; padding-bottom: 7px; }
  .address { margin-left: 16px; }
  .months .yr a, .months .yr span { width: 16.6%; padding: 6px 0; }
}