:root {
  --blue: #0099ff;
  --navy: #00264d;
  --btn-top: #e6f2f4;
  --btn-bottom: #aecdd4;
  --paper: #e4e8eb;
  --ink: #111;
  --link: #0b3d91;
  --visited: #5a2a82;
}
body {
  background: #000;
  color: var(--ink);
  font: 1.0625rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
}
.site-header, .content, .hero, .site-footer { max-width: 1038px; margin-inline: auto; }

/* top bar */
.site-header { background: var(--blue); padding: .5rem .75rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.site-header .logo img { display: block; border-radius: 4px; }
.site-header ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.site-header a {
  display: block; padding: .5rem .9rem; border: 3px solid #fff; border-radius: 3px;
  background: linear-gradient(var(--btn-top), var(--btn-bottom));
  color: var(--navy); font-weight: 700; text-decoration: none; text-align: center;
}
.site-header a:hover { background: #fff; }
.site-header a[aria-current] { color: #00560f; background: linear-gradient(#f3fbf4, #bfe3c6); }
.site-header a:focus-visible { outline-color: var(--navy); }

/* article pages */
.content { background: var(--paper); padding: 1rem; }
.content > * { max-width: 52rem; margin-left: auto; margin-right: auto; }
.content h1 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.9rem); line-height: 1.25; margin: .5rem auto 1rem; color: var(--navy); }
.content h2 { font-size: 1.45rem; line-height: 1.25; margin: 2rem auto .75rem; color: var(--navy); }
.content h3 { font-size: 1.2rem; margin: 1.5rem auto .5rem; color: var(--navy); }
.content p { margin-top: 0; margin-bottom: 1rem; }
.content a { color: var(--link); text-underline-offset: .15em; }
.content a:visited { color: var(--visited); }
.content a:hover { text-decoration-thickness: .15em; }
.content blockquote { margin: 1rem auto; padding: .25rem 1rem; border-left: 4px solid var(--blue); background: rgba(0, 38, 77, .06); }
.content blockquote p { margin: .5rem 0; }
.content img { height: auto; }
.lead { font-size: 1.1rem; }
.to-top { text-align: right; font-size: .9rem; margin-bottom: .25rem; }
.jump { margin: 1rem auto; padding: .5rem 1rem; background: rgba(0, 38, 77, .07); border-radius: 4px; }
.jump p { margin: 0; line-height: 1.8; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; padding: 0; margin: 0 auto .5rem; font-size: .9rem; max-width: 52rem; }
.breadcrumbs li + li::before { content: "\203A"; margin-right: .5rem; color: #555; }

.plate { display: block; margin: 0 auto 1.25rem; max-width: min(100%, 350px); border: 1px solid #9aa; }

.articles, .booklist, .linklist { padding-left: 1.25rem; }
.articles > li, .booklist > li, .linklist > li { margin-bottom: .9rem; }
.articles ul { margin-top: .4rem; }
.booklist > li, .linklist > li { margin-bottom: .5rem; }

.figure-pair { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1rem auto; }
.figure-pair figure { margin: 0; text-align: center; }
.figure-pair figcaption { font-size: .95rem; padding-top: .35rem; }

/* gallery */
.thumbs { list-style: none; margin: 0 auto 1.5rem; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); max-width: 52rem; }
.thumbs a { display: block; border: 3px solid #000; background: #fff; line-height: 0; }
.thumbs a:hover, .thumbs a:focus-visible { border-color: var(--blue); }
.thumbs img { width: 100%; height: auto; }
.gallery-set { border: 3px solid #000; padding: .5rem 1rem 0; margin: 1.5rem auto; max-width: 52rem; background: #f3f5f7; }
.gallery-set h2 { margin-top: .5rem; }
.photo-page > * { max-width: 62rem; }
.photo { margin: 0 auto 1rem; background: #222; padding: .75rem; }
.photo img { display: block; width: 100%; max-width: 900px; margin: 0 auto; height: auto; }
.photo figcaption { background: #ccc; padding: .75rem 1rem; margin-top: .75rem; text-align: center; font-size: 1.05rem; }
.photo figcaption p { margin: 0; }
.photo-nav ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.muted { color: #555; }

/* home page */
.hero { position: relative; isolation: isolate; overflow: hidden; color: #ff0; min-height: 34rem; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; z-index: -1; }
.hero-text {
  margin-left: auto; width: min(100%, 36rem); padding: 1.5rem 1.25rem 2rem;
  background: rgba(0, 18, 48, .68); min-height: 34rem; font-size: 1.15rem;
}
.hero a { color: #ff0; font-weight: 700; }
.hero a:visited { color: #ffe9a0; }
.hero a:focus-visible { outline-color: #fff; }
.hero h1 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); line-height: 1.25; margin: 1rem 0 1.25rem; }
.hero h2 { font-size: 1.2rem; margin: 1.25rem 0 .25rem; }
.hero .memorial { font-style: italic; font-weight: 700; font-size: 1.15rem; margin: 0; }
.hero .memorial strong { margin-left: .5rem; }
.names { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.names li { margin: .15rem 0; font-weight: 700; }
.hero .updated { margin-top: 1.5rem; font-size: .9rem; }

.site-footer { background: #000; color: #f4f4a8; font-size: .9rem; padding: .75rem 1rem 1.5rem; }
.site-footer p { margin: 0 0 .5rem; }

@media (min-width: 50em) {
  .content.has-plate { display: block; }
  .content.has-plate .plate { float: right; margin: 0 0 1rem 1.5rem; max-width: 350px; }
  .content.has-plate > .articles, .content.has-plate > .booklist { max-width: 30rem; margin-left: max(1rem, calc((100% - 52rem) / 2)); margin-right: 0; }
  .content.has-plate > h1 { max-width: 52rem; }
  }
@media (max-width: 49.99em) {
  .hero-text { width: 100%; }
  .hero-bg { object-position: 30% center; }
}