.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-header__inner { align-items: center; display: flex; justify-content: space-between; min-height: 4.5rem; position: relative; }
.site-brand { align-items: center; color: var(--color-heading); display: flex; gap: var(--space-3); text-decoration: none; }
.site-brand:hover { color: var(--color-heading); text-decoration: underline; }
.site-brand__logo { flex: 0 0 auto; height: 2.75rem; object-fit: contain; width: 2.75rem; }
.site-brand__copy { display: grid; line-height: 1.2; }
.site-brand__name { font-weight: 750; letter-spacing: -0.02em; }
.site-brand__tagline { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; }
.site-nav summary { align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-heading); cursor: pointer; display: flex; font-weight: 650; gap: var(--space-2); list-style: none; min-height: 2.75rem; padding: var(--space-2) var(--space-3); }
.site-nav summary::-webkit-details-marker { display: none; }
.site-nav[open] summary { background: var(--color-subtle); }
.site-nav__menu-icon { background: currentcolor; display: block; height: 0.125rem; position: relative; width: 1.125rem; }
.site-nav__menu-icon::before, .site-nav__menu-icon::after { background: currentcolor; content: ""; height: 0.125rem; left: 0; position: absolute; width: 100%; }
.site-nav__menu-icon::before { top: -0.35rem; }
.site-nav__menu-icon::after { top: 0.35rem; }
.site-nav[open] .site-nav__menu-icon { background: transparent; }
.site-nav[open] .site-nav__menu-icon::before, .site-nav[open] .site-nav__menu-icon::after { top: 0; }
.site-nav[open] .site-nav__menu-icon::before { transform: rotate(45deg); }
.site-nav[open] .site-nav__menu-icon::after { transform: rotate(-45deg); }
.site-nav nav { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); max-width: calc(100vw - (2 * var(--space-4))); min-width: 10rem; padding: var(--space-2); position: absolute; right: var(--space-4); top: calc(100% - var(--space-2)); z-index: 2; }
.site-nav--desktop { display: none; }
.site-nav__list { list-style: none; margin: 0; padding: 0; }
.nav-link { border-left: 0.2rem solid transparent; display: block; font-weight: 650; min-height: 2.75rem; padding: var(--space-2) var(--space-3); text-decoration: none; }
.nav-link:hover { background: var(--color-subtle); text-decoration: underline; }
.nav-link[aria-current="page"] { background: var(--color-subtle); border-left-color: var(--color-primary); color: var(--color-heading); }
.site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); color: var(--color-text-muted); padding-block: var(--space-8); }
.site-footer__inner { display: grid; gap: var(--space-4); }
.site-footer__about { display: grid; gap: var(--space-1); max-width: 42rem; }
.site-footer__brand { color: var(--color-heading); font-weight: 750; }
.site-footer__copyright { font-size: var(--font-size-sm); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer-link { font-weight: 650; }
.page-header { max-width: 45rem; }
.page-intro { color: var(--color-text-muted); font-size: var(--font-size-lg); }
.eyebrow { color: var(--color-accent-text); font-size: var(--font-size-sm); font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); }
.article-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; overflow: hidden; }
.article-card__media { background: var(--color-surface-elevated); display: block; overflow: hidden; }
.article-card__media img, .featured-article__media img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.article-card__content { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.article-card--text .article-card__content { padding-block: var(--space-8); }
.article-card__title { font-size: var(--font-size-h3); letter-spacing: -0.015em; }
.article-card__link { color: var(--color-heading); text-decoration: none; }
.article-card__summary { color: var(--color-text); line-height: 1.55; }
.article-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-subtle); }
.article-card:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-subtle); }
.article-card:hover .article-card__link { color: var(--color-primary-hover); }
.category-label { align-self: flex-start; background: var(--color-surface-elevated); border: 1px solid var(--color-accent); border-radius: 999px; color: var(--color-accent-text); font-size: var(--font-size-sm); font-weight: 750; letter-spacing: 0.04em; padding: var(--space-1) var(--space-3); text-transform: uppercase; }
.category-label a { color: inherit; text-decoration: none; }
.category-label a:hover { text-decoration: underline; }
.article-metadata { align-items: baseline; color: var(--color-text-muted); display: flex; flex-wrap: wrap; font-size: var(--font-size-sm); gap: var(--space-2); }
.tag-list { list-style: none; margin: 0; padding: 0; }
.tag { background: transparent; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-muted); font-size: var(--font-size-sm); padding: var(--space-1) var(--space-2); }
.tag a { color: inherit; text-decoration: none; }
.tag a:hover { color: var(--color-heading); text-decoration: underline; }
.featured-article { background: var(--color-heading); border: 1px solid var(--color-heading); border-radius: var(--radius-md); color: var(--color-surface); display: grid; overflow: hidden; }
.featured-article h2, .featured-article h3, .featured-article .article-card__link { color: var(--color-surface); }
.featured-article .article-card__summary, .featured-article .article-metadata { color: var(--color-surface); }
.featured-article .category-label { background: var(--color-surface-elevated); color: var(--color-accent-text); }
.featured-article .tag { border-color: var(--color-accent); color: var(--color-surface); }
.featured-article .tag a:hover { color: var(--color-surface); }
.featured-article__media { background: var(--color-heading); }
.featured-article__content { align-self: center; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); }
.featured-article__metadata { align-items: center; display: flex; gap: var(--space-3); }
.brand-avatar { border: 2px solid var(--color-accent); border-radius: 50%; flex: 0 0 auto; height: 3rem; object-fit: cover; width: 3rem; }
.brand-avatar--large { height: 8rem; width: 8rem; }
.compact-article { border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-4); }
.compact-article__title { font-size: var(--font-size-lg); }
.compact-project { border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-4); }
.compact-project__title { font-size: var(--font-size-lg); }
.related-content { margin-top: var(--space-16); }
.related-content > h2 { margin-bottom: var(--space-4); }
.button { align-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); display: inline-flex; font-weight: 650; justify-content: center; min-height: 2.75rem; padding: var(--space-2) var(--space-4); text-align: center; text-decoration: none; }
.button--primary { background: var(--color-primary); color: var(--color-surface); }
.button--primary:hover { background: var(--color-primary-hover); color: var(--color-surface); }
.button--secondary { background: var(--color-surface); border-color: var(--color-accent); color: var(--color-accent-text); }
.button--secondary:hover { background: var(--color-surface-elevated); border-color: var(--color-accent-text); color: var(--color-accent-text); }
.button--accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-heading); }
.button--accent:hover { background: var(--color-surface); color: var(--color-heading); }
.button[disabled], .button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
.pagination { justify-content: center; margin-top: var(--space-8); }
.empty-state { background: var(--color-surface-elevated); border-radius: var(--radius-md); padding: var(--space-8); }
.breadcrumb { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.breadcrumb__list { list-style: none; margin: 0; padding: 0; }
.breadcrumb__list > li { min-width: 0; overflow-wrap: anywhere; }
.breadcrumb__list { column-gap: var(--space-2); }
.breadcrumb__separator { margin-inline-end: var(--space-2); }
.editorial-container > .breadcrumb { margin-bottom: var(--space-6); }
.project-card__outcome { border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-sm); padding-top: var(--space-3); }
.project-card { border-top: var(--space-1) solid var(--color-accent); }
.project-context { color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); margin: 0; }
.project-context div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.project-context dt { color: var(--color-heading); font-weight: 650; }
.project-context dd { margin: 0; }
.project-outcome { border-top: 1px solid var(--color-border); margin-top: var(--space-12); padding-top: var(--space-8); }
.project-outcome p { margin-top: var(--space-3); }
.project-links { margin-top: var(--space-8); }
@media (max-width: 44.99rem) {
  .site-brand { gap: var(--space-2); }
  .site-brand__logo { height: 2.25rem; width: 2.25rem; }
  .site-brand__tagline { font-size: 0.75rem; }
  .section-heading--with-action { align-items: flex-start; }
  .project-links { align-items: stretch; flex-direction: column; }
}
@media (min-width: 45rem) {
  .article-grid { align-items: stretch; }
  .article-card { height: 100%; }
  .article-card__content { flex: 1; }
  .article-card__content .article-metadata { margin-top: auto; }
  .site-nav--mobile { display: none; }
  .site-nav--desktop { display: block; }
  .site-nav__list { display: flex; gap: var(--space-2); }
  .nav-link { border-bottom: 0.2rem solid transparent; border-left: 0; }
  .nav-link[aria-current="page"] { border-bottom-color: var(--color-primary); }
  .site-footer__inner { align-items: end; grid-template-columns: minmax(0, 1fr) auto; }
  .site-footer__copyright { grid-column: 1 / -1; }
  .featured-article:not(.featured-article--text) { grid-template-columns: minmax(20rem, 0.85fr) minmax(0, 1.15fr); }
  .featured-article--text { margin-inline: auto; max-width: var(--editorial-width); width: 100%; }
  .featured-article--text .featured-article__content { padding: var(--space-12); }
  .featured-article--text .article-card__summary { max-width: var(--reading-width); }
  .featured-article__media img { height: 100%; }
}
@media (min-width: 70rem) {
  .featured-article__content { padding: var(--space-12); }
}

.home-hero { background: var(--color-background); border-bottom: 1px solid var(--color-border); padding-block: var(--space-12); }
.home-hero__inner { align-items: center; display: grid; gap: var(--space-8); max-width: var(--site-width); }
.home-hero__content { align-items: flex-start; }
.home-hero h1 { font-size: clamp(2.5rem, 7vw, 5rem); letter-spacing: -0.04em; max-width: 15ch; }
.home-hero h1 span { display: block; }
.home-hero__title-accent { color: var(--color-accent); }
.home-hero__intro { color: var(--color-text-muted); font-size: var(--font-size-lg); max-width: 60ch; }
.home-hero__image { aspect-ratio: 1; justify-self: center; max-height: 30rem; object-fit: contain; width: 100%; }
.welcome-pill { background: var(--color-surface-elevated); border: 1px solid var(--color-accent); border-radius: 999px; color: var(--color-accent-text); font-size: var(--font-size-sm); font-weight: 750; letter-spacing: 0.08em; padding: var(--space-1) var(--space-3); text-transform: uppercase; }
.home-section { gap: var(--space-8); }
.section-heading { max-width: 45rem; }
.section-heading--with-action { align-items: end; display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; max-width: none; }
.section-heading--with-action > a { font-weight: 650; }
.home-latest { background: var(--color-surface-elevated); border-block: 1px solid var(--color-border); }
.category-navigation { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.category-navigation a { align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-heading); display: grid; font-weight: 700; gap: var(--space-3); grid-template-columns: auto 1fr auto; min-height: 4.5rem; padding: var(--space-4); text-decoration: none; }
.category-navigation a:hover { border-color: var(--color-accent); box-shadow: var(--shadow-subtle); }
.category-navigation__icon { background: var(--color-accent); border-radius: 50%; height: var(--space-8); position: relative; width: var(--space-8); }
.category-navigation__icon::after { background: var(--color-heading); content: ""; height: var(--space-2); left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: var(--space-2); }
.category-navigation__arrow { color: var(--color-heading); font-size: var(--font-size-lg); }
.home-about { align-items: center; background: var(--color-heading); border-radius: var(--radius-md); color: var(--color-surface); display: grid; gap: var(--space-8); padding: var(--space-8); }
.home-about h2 { color: var(--color-surface); }
.home-about .eyebrow { color: var(--color-background); }
.about-page { gap: var(--space-12); }
.about-page section { max-width: var(--reading-width); }
@media (min-width: 45rem) {
  .home-hero { padding-block: calc(var(--space-16) + var(--space-8)); }
  .home-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr); }
  .home-about { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-12); }
}