:root {
  --page-bg: #ffffff;
  --ink: #000000;
  --link: #0000ee;
  --olive: #718424;
  --banner-blue: #3940c8;
  --deep-blue: #232f8e;
  --lavender: #d9d8e4;
  --accent-orange: #f07800;
  --leaf-green: #2b9a16;
  --rule: #cfcfd8;
}

html {
  background: var(--page-bg);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--page-bg);
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.35;
}

a {
  color: var(--link);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

.site-shell {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 0 10px 24px;
}

.skip-link {
  display: inline-block;
  font-size: 13px;
  margin: 6px 0;
}

.utility-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  font-size: 13px;
  margin-bottom: 6px;
}

.identity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 18px;
  align-items: start;
}

.project-mark img {
  width: 475px;
  max-width: 100%;
}

.site-search fieldset {
  border: 1px solid var(--rule);
  padding: 8px;
}

.site-search legend,
.site-search label {
  font-size: 13px;
}

.search-row {
  display: flex;
  gap: 5px;
}

.site-search input {
  min-width: 0;
  flex: 1;
  border: 1px solid #999;
  padding: 3px 4px;
  font-family: inherit;
}

.site-search button {
  border: 1px solid #777;
  background: #f4f4f4;
  padding: 3px 8px;
  font-family: inherit;
  color: var(--ink);
}

.primary-nav {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 10px 0 0;
  padding: 7px 0;
}

.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav li {
  margin: 0;
  padding: 0;
}

.project-banner {
  background: var(--lavender);
  border-bottom: 4px solid var(--deep-blue);
  overflow: hidden;
}

.project-banner img {
  display: block;
  width: 100%;
}

.project-feature {
  border-left: 6px solid var(--leaf-green);
  padding: 10px 14px;
  margin: 0 0 14px;
  background: #fbfbfb;
}

.project-feature .feature-title {
  margin: 0 0 4px;
  color: var(--olive);
  font-weight: bold;
}

.project-feature p {
  margin: 0 0 6px;
}

.project-feature a {
  color: var(--accent-orange);
  font-weight: bold;
}

.site-main {
  clear: both;
}

.content-grid {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.left-rail {
  border-top: 4px solid var(--olive);
  font-size: 14px;
}

.left-rail section {
  margin-bottom: 18px;
}

.left-rail h2 {
  margin: 0;
  padding: 7px 9px;
  color: #ffffff;
  background: var(--olive);
  font-size: 16px;
  line-height: 1.2;
}

.left-rail ul {
  margin: 0;
  padding: 8px 0 8px 18px;
}

.left-rail li {
  margin-bottom: 6px;
}

.content-panel {
  min-width: 0;
}

.breadcrumbs {
  color: #555;
  font-size: 13px;
  margin: 0 0 8px;
}

.crumb-sep {
  display: inline-block;
  margin: 0 5px;
  color: #777;
}

.site-prose h1 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 32px;
  line-height: 1.1;
  font-weight: bold;
}

.site-prose h2 {
  margin: 18px 0 8px;
  color: var(--deep-blue);
  font-size: 24px;
  line-height: 1.15;
}

.site-prose h3 {
  margin: 15px 0 7px;
  font-size: 20px;
}

.site-prose p,
.site-prose ol,
.site-prose ul {
  margin-top: 0;
  margin-bottom: 12px;
}

.site-prose ol,
.site-prose ul {
  padding-left: 28px;
}

.site-prose li {
  margin-bottom: 5px;
}

.site-image {
  margin: 12px 0;
}

.site-image img {
  border: 0;
}

.site-image figcaption {
  color: #555;
  font-size: 13px;
}

.homepage-grid .site-image:first-of-type {
  float: right;
  max-width: 310px;
  margin: 0 0 12px 18px;
}

.list-card,
.category-card {
  border-top: 1px solid var(--rule);
  padding-top: 10px;
  margin-bottom: 12px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(var(--category-columns, 3), minmax(0, 1fr));
  gap: 14px;
}

.category-card h2 {
  font-size: 19px;
  margin-top: 0;
}

.card-style-horizontal .category-card,
.category-card.horizontal {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
}

.card-style-minimal,
.category-card.minimal {
  display: block;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

blockquote {
  border-left: 4px solid var(--lavender);
  margin: 14px 0;
  padding: 8px 14px;
  background: #f8f8fb;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.article-dates,
.article-summary {
  color: #444;
}

.article-main-image {
  display: block;
  margin: 0 0 14px;
}

.article-toc {
  border: 1px solid var(--rule);
  padding: 10px 12px;
  margin: 0 0 14px;
  background: #fbfbfb;
}

.site-footer {
  clear: both;
  margin-top: 24px;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  font-size: 14px;
}

.footer-strip {
  margin-bottom: 12px;
}

.footer-strip img {
  width: 100%;
  max-width: 640px;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  border-top: 4px solid var(--deep-blue);
  padding-top: 10px;
}

.footer-columns h2 {
  margin: 0 0 7px;
  color: var(--deep-blue);
  font-size: 17px;
}

.footer-columns ul {
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 760px) {
  .site-shell {
    padding: 0 12px 20px;
  }

  .identity-row,
  .content-grid,
  .footer-columns,
  .category-grid {
    grid-template-columns: 1fr;
  }

  .utility-links {
    justify-content: flex-start;
  }

  .homepage-grid .site-image:first-of-type {
    float: none;
    max-width: 100%;
    margin: 12px 0;
  }

  .site-prose h1 {
    font-size: 28px;
  }
}

/* Compact header: keep header height well under 33% of viewport */
header .project-banner, .site-header .project-banner { display: none; }
header section.project-feature, .site-header section.project-feature { display: none; }
header .identity-row, .site-header .identity-row { padding: .4rem 0; }