:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #223c33; background: #f3f5f2; font-synthesis: none; letter-spacing: 0; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #bd493b; outline-offset: 5px; }
.skip-link { position: absolute; top: -60px; left: 20px; z-index: 9; padding: 12px; background: white; }
.skip-link:focus { top: 10px; }
.masthead, main, footer { max-width: 1360px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.masthead { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #c8d2c8; }
.wordmark { font-size: 14px; font-weight: 850; }
.location { font-size: 11px; font-weight: 650; color: #657369; }
.intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding: 44px 0 38px; }
.eyebrow { margin: 0 0 9px; font-size: 11px; font-weight: 750; color: #9f5143; }
h1 { margin: 0; font-size: 42px; line-height: 1.1; font-weight: 760; }
.intro-note { margin: 0; font-size: 15px; line-height: 1.6; color: #617469; }
.projects { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.project { min-width: 0; border-top: 3px solid #448776; }
.pulse-project { border-color: #b85e55; }
.project-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; font-size: 10px; font-weight: 750; }
.status { color: #6f776d; text-align: right; font-weight: 500; }
.status.online { color: #2c7560; }
.project-image { display: block; overflow: hidden; background: #dbe3dc; aspect-ratio: 3 / 2; }
.project-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.project-image:hover img { transform: scale(1.015); }
.project-heading { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; gap: 12px; }
h2 { margin: 0; font-size: 29px; line-height: 1.2; font-weight: 700; }
.enter { width: 36px; height: 36px; display: grid; place-items: center; border-bottom: 1px solid #839f8e; }
.enter img { width: 24px; height: 24px; }
.description { margin: 15px 0 22px; min-height: 78px; color: #5c6d60; font-size: 15px; line-height: 1.7; max-width: 57ch; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 17px 0; border-top: 1px solid #ccd7cc; border-bottom: 1px solid #ccd7cc; }
.city-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metrics dt { font-size: 11px; color: #68776a; line-height: 1.4; min-height: 2.8em; overflow-wrap: anywhere; }
.metrics dd { margin: 7px 0 0; font-size: 25px; font-weight: 650; font-variant-numeric: tabular-nums; }
.metrics dd.unavailable { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.project-links { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 19px 0; font-size: 13px; font-weight: 700; }
.project-links { flex-wrap: wrap; }
.project-links a:hover { color: #ae5043; }
.project-links span { margin-left: 8px; }
footer { display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid #c8d2c8; margin-top: 35px; padding-top: 24px; padding-bottom: 35px; color: #718075; font-size: 12px; line-height: 1.6; }
footer p { margin: 0; }
footer p:last-child { text-align: right; }
@media (max-width: 900px) { .masthead, main, footer { padding-left: 28px; padding-right: 28px; } .projects { gap: 26px; } .intro-note { max-width: 240px; } }
@media (max-width: 640px) {
  .masthead, main, footer { padding-left: 20px; padding-right: 20px; }
  .masthead { height: 65px; } .location { max-width: 95px; text-align: right; font-size: 9px; }
  .intro { display: block; padding: 30px 0 26px; } h1 { font-size: 32px; } .intro-note { margin-top: 14px; font-size: 14px; max-width: none; }
  .intro-note br { display: none; } .projects { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .description { min-height: 0; } h2 { font-size: 27px; } .project-top { font-size: 9px; }
  .city-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-links { font-size: 12px; gap: 10px; } .project-links span { margin-left: 2px; }
  footer { display: block; margin-top: 26px; } footer p:last-child { text-align: left; margin-top: 13px; }
}
@media (prefers-reduced-motion: reduce) { .project-image img { transition: none; } .project-image:hover img { transform: none; } }