:root { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; color: #171713; background: #c9cbbd; font: 16px/1.4 "Times New Roman", Times, serif; }
a:link { color: #003db2; text-decoration: underline; }
a:visited { color: #643079; }
a:hover { color: #a12829; }
a:focus-visible { outline: 3px solid #a12829; outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 5px; background: #fff; padding: 5px; z-index: 5; }
.skip:focus { left: 5px; }
.site { max-width: 880px; margin: 10px auto 24px; border: 2px solid #303830; background: #f4f1e7; box-shadow: 4px 4px 0 #7d847a; }
.masthead { background: #175658; color: #fffce9; padding: 12px 17px 13px; border-bottom: 4px double #c4b878; text-align: center; }
.masthead-line { font: bold 15px Arial, Helvetica, sans-serif; letter-spacing: .18em; }
.site-title { font: bold clamp(27px, 6vw, 42px)/1.05 Arial, Helvetica, sans-serif; letter-spacing: .04em; margin: 4px 0; text-shadow: 2px 2px #2b7878; }
.strap { font-size: 15px; letter-spacing: .04em; }
.pixel { color: #e5c467; font-size: 13px; }
.columns { display: grid; grid-template-columns: 188px minmax(0,1fr); }
nav { background: #e1e1d4; border-right: 2px solid #6e756d; padding: 12px 10px 14px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
nav .box-heading { color: white; background: #267070; padding: 3px 5px; border: 1px solid #155758; font-weight: bold; font-size: 13px; letter-spacing: .03em; }
nav ul { list-style: square; margin: 8px 0 14px; padding-left: 23px; }
nav li { margin: 0 0 9px; }
nav a[aria-current="page"] { font-weight: bold; color: #184d50; }
nav .nav-label { font-weight: bold; margin: 11px 0 0; font-size: 13px; }
.nav-small, .small { font-size: 13px; }
main { min-width: 0; padding: 13px 19px 26px; }
h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; line-height: 1.2; color: #195457; }
h1 { font-size: 23px; margin: 1px 0 11px; }
h2 { font-size: 19px; margin: 16px 0 10px; }
h3 { font-size: 17px; margin: 6px 0 7px; }
p { margin: 0 0 11px; }
hr { border: 0; border-top: 1px solid #8e9388; border-bottom: 1px solid white; margin: 15px 0; }
.project-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid #7a827c; }
.home-project { padding: 9px; border-right: 1px solid #7a827c; background: #f9f7ed; min-width: 0; }
.home-project:last-child { border-right: none; }
.home-project h3 { min-height: 2.4em; }
.home-project img { width: 100%; height: 115px; object-fit: contain; background: #101525; border: 1px solid #777; image-rendering: auto; }
.home-project p { margin: 7px 0 2px; }
.updates { padding-left: 24px; }
.updates li { margin-bottom: 8px; }
.portrait-row { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 16px; }
.portrait { width: 170px; margin: 0; }
.portrait img { display: block; width: 100%; height: auto; border: 3px ridge #6e8989; image-rendering: auto; }
.photo-gap { width: 170px; height: 213px; border: 2px dashed #667386; background: #e6e6df; color: #333e45; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 11px; font: 14px/1.4 Arial, Helvetica, sans-serif; }
.photo-gap strong { font-size: 15px; }
.jump { border: 1px solid #8e9388; padding: 6px 8px; background: #e5e9e6; }
.project-history { margin-top: 23px; scroll-margin-top: 10px; }
.project-history > h2 { border-bottom: 3px double #566575; padding-bottom: 4px; }
.project-intro { font-style: italic; }
.milestone { border-left: 3px solid #8196a1; padding: 0 0 7px 12px; margin: 16px 0 23px; }
.period { display: inline-block; background: #d6e4de; border: 1px solid #79958a; padding: 2px 5px; font: bold 13px Arial, Helvetica, sans-serif; }
.milestone h3 { margin-top: 8px; }
.context { color: #3d454b; background: #e6e8e2; border: 1px solid #bac1b7; padding: 5px 7px; font-size: 14px; }
.media-grid { display: flex; gap: 12px; align-items: start; flex-wrap: wrap; }
figure { width: min(100%, 275px); margin: 3px 0 11px; }
figure img, figure video { display: block; max-width: 100%; width: 100%; height: auto; background: #141c2a; border: 3px ridge #7e8986; }
figure img { image-rendering: pixelated; }
figure video { aspect-ratio: 330 / 224; }
figcaption { padding: 3px 2px; font: 13px/1.35 Arial, Helvetica, sans-serif; }
.back { font-size: 14px; text-align: right; }
.resources { padding-left: 24px; }
.resources li { margin-bottom: 10px; }
footer { padding: 0 15px 8px; text-align: center; font: 13px Arial, Helvetica, sans-serif; color: #343a3c; }
footer hr { margin: 0 0 8px; }
@media (max-width: 680px) {
  .site { margin: 0; border-left: none; border-right: none; box-shadow: none; }
  .columns { display: block; }
  nav { border-right: none; border-bottom: 2px solid #6e756d; padding: 7px 12px; }
  nav ul { display: flex; flex-wrap: wrap; gap: 3px 16px; list-style: none; padding: 0; margin: 7px 0; }
  nav li { margin: 0; }
  nav hr, nav .nav-label, nav .nav-small, nav ul:last-of-type { display: none; }
  main { padding: 14px 14px 25px; }
  .project-list { display: block; }
  .home-project { border-right: none; border-bottom: 1px solid #7a827c; }
  .home-project:last-child { border-bottom: none; }
  .home-project h3 { min-height: 0; }
  .home-project img { height: auto; max-height: 230px; object-fit: contain; }
  figure { width: min(100%, 330px); }
}
@media (max-width: 420px) { .portrait-row { display: block; } .photo-gap { margin: 0 0 14px; } }