:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #222;
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; overflow-wrap: anywhere; }
a { color: #005386; text-underline-offset: 0.15em; }
a:hover { color: #003651; }
a:focus-visible { outline: 2px solid #005386; outline-offset: 3px; }
h1, h2 { line-height: 1.3; }
h1 { margin: 0 0 0.75rem; font-size: 1.5rem; }
h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
p { margin: 0 0 1rem; }

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  padding: 0.5rem;
  background: #fff;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
.site-header { background: #eee; }
.brand {
  display: inline-block;
  margin: 0.65rem 1.25rem;
  color: #005386;
  font-size: 1.5rem;
  text-decoration: none;
}
.brand span + span::before { content: ' '; }
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  padding: 0.2rem 1rem;
  background: #176b94;
  border-block: 1px solid #125777;
}
.site-header nav a { padding: 0.3rem 0.5rem; color: #fff; text-decoration: none; }
.site-header nav a:hover { background: #125777; text-decoration: underline; }
.site-header nav a:focus-visible { outline-color: #fff; outline-offset: -2px; }

main {
  display: grid;
  grid-template-columns: 14rem minmax(0, 50rem);
  column-gap: 2rem;
  padding: 1.5rem 1.25rem 0;
}
.hero, .project { grid-column: 2; min-width: 0; }
.hero { padding-bottom: 1.75rem; }
.eyebrow, .project-meta { color: #555; font-size: 0.875rem; }
.eyebrow { margin-bottom: 0.4rem; }
.hero-contact { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.project-index {
  grid-column: 1;
  grid-row: 1 / span 7;
  align-self: start;
  border-right: 1px dotted #bbb;
  padding-right: 1rem;
}
.project-index h2 { font-size: 1rem; }
.project-index ol { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.project-index li { margin: 0; }
.project-index a { display: block; padding: 0.45rem 0; text-decoration: none; }
.project-index a:hover { text-decoration: underline; }
.project-index a span { display: block; }
.project-index a span + span { color: #555; font-size: 0.8rem; }
.project { padding: 1.5rem 0; border-top: 1px solid #ddd; scroll-margin-top: 1rem; }
.project-meta { margin-bottom: 1rem; }
.project-body dl { margin: 0 0 1rem; }
.project-body dl > div { margin-bottom: 0.6rem; }
.project-body dt { display: inline; font-weight: bold; }
.project-body dt::after { content: ': '; }
.project-body dd { display: inline; margin: 0; }
.project-technologies { margin-bottom: 1rem; }
.project-technologies-label { margin: 0; font-size: 0.875rem; font-weight: bold; }
.tags { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.tags li:not(:last-child)::after { content: ',\00a0'; }
.project-links { margin-bottom: 0; }
.back-to-projects { margin: 1rem 0 0; font-size: 0.875rem; }
.project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.project-figure { min-width: 0; margin: 0; }
.project-figure-wide { grid-column: 1 / -1; }
.project-figure > a { display: block; width: fit-content; max-width: 100%; }
.project-figure img { display: block; max-width: 100%; width: auto; height: auto; max-height: 28rem; object-fit: contain; object-position: left; }
.project-figure figcaption { margin-top: 0.4rem; color: #555; font-size: 0.8rem; }
.site-footer { max-width: 50rem; margin: 0 1.25rem 0 17.25rem; padding: 1.5rem 0; border-top: 1px solid #ddd; }
.site-footer address { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-style: normal; }
.footer-note { margin: 1.5rem 0 0; color: #555; font-size: 0.8rem; }

@media (max-width: 48rem) {
  .brand { font-size: 1.25rem; margin-inline: 1rem; }
  .site-header nav { padding-inline: 0.5rem; }
  main { display: block; padding: 1.25rem 1rem 0; }
  .project-index { border-right: 0; border-top: 1px solid #ddd; padding: 1rem 0; }
  .project-index ol { columns: 2; column-gap: 1.5rem; }
  .project-index li { break-inside: avoid; }
  .site-footer { margin-inline: 1rem; }
}

@media (max-width: 30rem) {
  .project-index ol { columns: 1; }
  .project-gallery { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  @page { margin: 1.5cm; }
  :root { font-size: 10pt; color: #000; }
  main { display: block; padding: 0; }
  .site-header { background: none; }
  .brand { margin: 0 0 1rem; font-size: 16pt; }
  .skip-link, .site-header nav, .hero-contact, .project-index, .back-to-projects { display: none; }
  .hero, .project { padding-block: 1rem; }
  h1, h2, .project-heading { break-after: avoid; }
  .project-body dl > div, .project-figure { break-inside: avoid; }
  .project-gallery { display: block; }
  .project-figure { margin-bottom: 1rem; }
  .project-figure img { max-height: 12cm; }
  .site-footer { max-width: none; margin: 0; }
  a { color: #000; }
  .project-links a::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}

/* The introduction is a small standalone page, without the project sidebar. */
main.home { display: block; max-width: 44rem; padding: 2rem 1.25rem; }
.home section + section { margin-top: 1.75rem; }
.home-contact { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-style: normal; }
.site-header nav a[aria-current="page"] { font-weight: bold; text-decoration: underline; }
.legacy-project { display: none; }
.legacy-project:target { display: block; margin-top: 1.5rem; }
@media print {
  main.home { max-width: none; padding: 0; }
  .home-contact a::after { content: ' (' attr(href) ')'; }
}