/* A single pair of content rails, with no extra inset on nested wrappers. */
#manifest > .scene-fit,
#prace > .portfolio-scroll {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--layout-gutter);
}

#manifest .signal-top,
#manifest .signal-layout,
#prace .section-marker,
#prace .portfolio-header,
#prace .portfolio-panel,
#prace .portfolio-columns {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Percentage padding otherwise follows the viewport beyond the page cap. */
.site-footer {
  padding-inline: min(var(--layout-gutter), calc(var(--layout-max) * .032));
}

@media (max-width: 960px) {
  .portfolio-header > div {
    width: 100%;
    min-width: 0;
  }

  .portfolio-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .portfolio-tabs button {
    text-wrap: balance;
  }

  .portfolio-tabs button:first-child {
    text-align: left;
  }

  .portfolio-tabs button:last-child {
    text-align: right;
  }
}

@media (max-width: 640px) {
  /* Let a tall Manifest grow vertically instead of shrinking its entire width. */
  main > #manifest {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding-block: 102px 24px;
  }

  main > #manifest > .scene-fit {
    position: relative;
    inset: auto;
    transform: none;
    padding-block: 0;
  }
}