.site-header { background: var(--white); }
.wordmark { font-size: 20px; }
[hidden] { display: none !important; }
.portfolio-password-dialog { width: min(360px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--muted); border-radius: 8px; font: inherit; }
.portfolio-password-dialog::backdrop { background: rgb(0 0 0 / 25%); }
.portfolio-password-dialog label { display: block; margin-bottom: 16px; }
.portfolio-password-dialog input { width: 100%; padding: 8px; margin-bottom: 16px; font: inherit; }
.portfolio-password-dialog form > div { display: flex; justify-content: flex-end; gap: 12px; }
.portfolio-password-dialog button { padding: 8px 12px; font: inherit; cursor: pointer; }
.project-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 64px;
  margin-top: 64px;
  padding-inline: var(--gutter);
}
.project-description {
  position: sticky;
  align-self: start;
  top: calc(var(--nav-height) + 64px);
  width: 300px;
  max-height: calc(100svh - var(--nav-height) - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  line-height: 1.375;
}
.project-brand { font-weight: 800; text-transform: uppercase; }
.project-description h1 { font-size: 20px; font-weight: 500; line-height: 1.35; }
.project-subtitle { color: var(--muted); font-size: 20px; font-weight: 500; line-height: 1.35; }
.project-story { color: var(--muted); }
.project-story p + p { margin-top: 8px; }
.project-story a { color: var(--lime); font-weight: 700; }
.project-story a:hover { color: var(--lime-hover); }
.project-gallery { grid-column: 2; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.project-image { display: block; width: 100%; height: auto; }
.project-kit { aspect-ratio: 948 / 865; position: relative; overflow: hidden; }
.project-kit img { position: absolute; width: 100%; height: 109.6%; left: .03%; top: .04%; }
.project-sample { aspect-ratio: 1920 / 1329; object-fit: cover; }
.project-video { display: block; width: 100%; aspect-ratio: 1190 / 670; border: 0; background: #d9d9d9; }
.project-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.project-pair img { aspect-ratio: 1; object-fit: contain; }
.project-pair img + img { object-fit: cover; }
.project-icons { aspect-ratio: 1190 / 670; object-fit: cover; }
.portfolio-gallery-heading { width: 100%; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.375; }

@media (max-width: 800px) {
  .project-layout { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .project-description { position: static; width: auto; max-height: none; overflow: visible; }
  .project-gallery { grid-column: 1; }
}