/* One in-flow sticky surface. Height never changes in response to scrolling. */
:root { --navigation-height: 4rem; }
html { scroll-padding-top: calc(var(--navigation-height) + var(--space-lg)); }
.site-chrome { position: sticky; top: 0; z-index: 20; background: var(--ivory); border-bottom: 1px solid var(--rule); }
.site-chrome .site-header { min-height: 64px; container: site-navigation / inline-size; }
.site-chrome .wordmark>span { line-height: 1; }
.skip-link { z-index: 30; }
.project-chrome .site-header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; column-gap: var(--space-xl); }
.project-chrome .wordmark { grid-column: 1; grid-row: 1; }
.project-chrome nav[aria-label="Main navigation"] { grid-column: 3; grid-row: 1; gap: var(--space-lg); }
.project-chrome .case-navigation { grid-column: 2; grid-row: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 0 var(--space-lg); border: 0; border-inline: 1px solid var(--rule); gap: var(--space-md); }
.project-chrome .case-navigation a { font-size: .8125rem; }
.project-chrome a:focus-visible { outline-color: var(--project-ink); }
@media(max-width: 1100px) {
  .project-document { --navigation-height: 7rem; }
  .project-chrome .site-header { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); }
  .project-chrome .wordmark { min-height: 56px; flex: 1 1 auto; }
  .project-chrome nav[aria-label="Main navigation"] { min-height: 56px; flex: 0 1 auto; }
  .project-chrome .case-navigation { flex: 1 0 100%; max-width: none; min-height: 52px; padding: .25rem 0; border: 0; border-top: 1px solid var(--rule); }
}
@media(max-width: 600px) {
  .project-document { --navigation-height: 8rem; }
  .site-chrome .site-header { padding-block: 0; }
  .project-chrome .case-navigation { gap: var(--space-sm); }
  .project-chrome .case-position strong { display: none; }
  .project-chrome nav[aria-label="Main navigation"] { gap: 12px; }
  .site-header nav[aria-label="Main navigation"] a[href="/#work"] span { display: inline; }
  .project-chrome .wordmark { min-width: 0; overflow-wrap: anywhere; }
}
/* Reflow for a narrow content field or enlarged type, without reducing type. */
@container site-navigation (max-width: 20rem) {
  .project-chrome .case-navigation { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4px 12px; }
  .project-chrome .case-position { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .project-chrome .case-previous { grid-column: 1; grid-row: 2; }
  .project-chrome .case-next { grid-column: 2; grid-row: 2; }
  .project-chrome .case-navigation a { gap: 8px; }
  .project-chrome .case-navigation a strong { line-height: 1.3; }
}